组件间的通讯方式（包含自定义组件）

一、父组件给子组件传值

1、props

通过props来接收外界传递到组件的内部的值，但也仅仅只能接收；props是单向绑定的，即只能由父向子传递，而不能子向父传递。

子组件
<template>
    <view id="maView">
        这是父组件传递过来的数据{{msg}}
    </view>
</template>
<script>
    export default {
        // 父组件传递进来的数据通过props[]接收
        props:['msg'],
    }
</script>

其他组件在使用上述所说组件的时候传递值

父组件
<template>
    <view class="content">
        <!-- 父组件通过参数传递进去msg -->
        <test v-if="flag" :msg="msg"></test>
    </view>
</template>

<script>
        //导入组件
    import test from '../../components/text.vue'
    export default{
        data() {
            return {
                msg:'hello',
            }
        },
                //注册组件
        components:{
            test
        },
    }
</script>

2、$ref

子组件
<template>
    <view id="maView">
        {{message}}
    </view>
</template>
<script>
    export default {
        data() {
            return {
                message:'',
            };
        },
        methods:{
            getMessage(m){
                this.message = m
            }
        },
    }
</script>

父控件
<template>
    <view class="content">
        <test ref="msg"></test>
    </view>
</template>

<script>
    import test from '../../components/text.vue'
    export default{
        data() {
            return {
            }
        },
        components:{
            test
        },
        mounted:function(){
            this.$refs.msg.getMessage('我是子组件')
        }
    }
</script>

通过ref="msg"可以将子组件的实例指给$ref，并通过.msg.getMessage()来调用子控件的getMessage方法，然后将参数传递给子控件。

二、子组件给父组件传值

这里在子组件添加的buton主要模拟实际过程中要传值的时机，然后直接调用$emit去触发自定义事件和所要传递的数据

子控件
<template>
    <view id="maView">
        <button @click="sendNum">给父组件传值</button>
    </view>
</template>

<script>
    export default {
        name:"text",
        data() {
            return {
                num:3,
            };
        },
        methods:{
            sendNum(){
                this.$emit('myEven',this.num)
            }
        },
    }
</script>

在父组件使用子组件的时候定义事件，然后通过定义的方法去接收数据

<template>
    <view class="content">
        <!-- 父组件通过参数传递进去msg -->
        <test v-if="flag" :msg="msg" @myEven="getNum"></test>
    </view>
</template>
<script>
    import test from '../../components/text.vue'
    export default{
        data() {
            return {
            }
        },
        components:{
            test
        },
        methods:{
            getNum(num){
                console.log(num)
            }
        }
    }
</script>

3、两个组件之间的传值

通过触发全局自定义事件传值uni.$emit(eventName,OBJECT)

a组件
<template>
    <view class="content">
        这是a组件:
        <button type="primary" @click="changeNum">修改b组件的数据</button>
    </view>
</template>

<script>
    export default{
        methods:{
            changeNum(){
                uni.$emit('updateNum',10)
                
            }
        }
    }
</script>

通过uni.$on(eventName,callback)监听全局的自定义事件以获得传入参数

b组件
<template>
    <view class="content">
        这是b组件的数据{{num}}
    </view>
</template>

<script>
    export default{
        data(){
            return{
                num:0,
            };
        },
        created() {
            // 监听自定义updateNum事件
            uni.$on('updateNum',num=>{
                this.num += num
            })
        }
    }
</script>