uni-app组件之间的通讯--父子/兄弟组件之间传递数据

Posted 2020-12-20 蓝精灵

$emit、$on、$off常用于跨页面、跨组件通讯

uni.$emit(eventName,OBJECT)  触发全局的自定事件。

uni.$on(eventName,callback)  监听全局的自定义事件。事件可以由 uni.$emit 触发，回调函数会接收所有传入事件触发函数的额外参数。

uni.$off([eventName, callback])  移除全局自定义事件监听器

一、父组件给子组件传递数据

子组件通过props接收外界传递到组件内部的值

// 父 index.vue   通过属性绑定进行传递  v-bind:简写为:

<test  :title="title" ></test>
data() {
        return {
            title:‘Hello‘,
        }
    },

// 子组件 test.vue   通过props接收
<template>
    <view>这是父组件传递过来的数据{{title}} </view>
</template>

    export default {
        props:[‘title‘],//接收
    }

二、子组件向父组件传值

通过$emit触发事件进行传递参数

// 子组件 test.vue  传值num
<template>
    <view>
        子组件点击按钮触发给父组件传值
        <button @click="sendNum">给父组件传值</button>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                num:‘3‘,
            };
        },
        props:[‘title‘],//接收
        methods:{
            sendNum(){this.$emit(‘myEven‘,this.num) //给父组件传值
        },
    }
</script>    

// index.vue  父组件接收num 
<view class="content">
    <test  :title="title" @myEven= ‘getNum‘></test>{{num}}
</view>
export default {
       data() {
            return {
                num:0,//默认0
            }
        },
        methods: {
        getNum(num){
            console.log(num)
    　　　　　this.num = num
        }
    },
}    

三、兄弟组件之间通讯

a.创建组件a，b，引入index.vue, components注册

// index .vue  页面展示组件内容
<script>
    import test from ‘../../components/test.vue‘
    import testA from ‘@/components/a.vue‘
    import testB from ‘@/components/b.vue‘
    export default {
        components:{
            test,
            "test-a":testA,
            "test-b":testB,
        },
    }
</script>
<template>
    <view class="content">
        <test-a></test-a>
        <test-b></test-b>
    </view>
</template>

b.通过uni.$on注册一个全局监听事件，通过uni.$emit触发全局监听事件

//a组件 a.vue
<template>
    <view><button @click="addNum">修改b组件数据</button></view>
</template>

<script>
    export default {
        methods:{
            addNum(){
                uni.$emit(‘changeNum‘,10) //触发全局变量自定义事件changeNum，该函数为b组件内修改b组件内容的方法  
　　　　　　　　} 
　　　　　　} 
　　} 
</script>

 

//b组件 b.vue  a组件更改该组件内容
<template>
    <view>
        数据{{num}}
    </view>
</template>

<script>
    export default {
        data() {
            return {
                num:0,
            };
        },
        created(){ //创建全局监听自定义事件  改变内容
            uni.$on(‘changeNum‘,num=>{
                this.num+=num
            })
        },
    }
</script>