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

uni-app组件之间的通讯–父子/兄弟组件之间传递数据
$emit、$on、$off常用于跨页面、跨组件通讯uni.$emit(eventName,OBJECT) 触发全局的自定事件。
uni.$on(eventName,callback)监听全局的自定义事件。事件可以由uni.$emit 触发，回调函数会接收所有传入事件触发函数的额外参数。
uni.$off([eventName, callback]) 移除全局自定义事件
一、父组件给子组件传递数据
子组件通过props接收外界传递到组件内部的值

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

data() {
return {
title:‘Hello’,
}
},

// 子组件 test.vue 通过props接收

这是父组件传递过来的数据{{title}}

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

二、子组件向父组件传值
通过$emit触发事件进行传递参数

// 子组件 test.vue 传值num


子组件点击按钮触发给父组件传值
<button @click=“sendNum”>给父组件传值

// index.vue 父组件接收num

<test :title=“title” @myEven= ‘getNum’>{{num}}

export default {
data() {
return {
num:0,//默认0
}
},
methods: {
getNum(num){
console.log(num)
　　　　　this.num = num
}
},
}

三、兄弟组件之间通讯
a.创建组件a，b，引入index.vue, components注册

// index .vue 页面展示组件内容

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

//a组件 a.vue

<button @click=“addNum”>修改b组件数据

//b组件 b.vue a组件更改该组件内容


数据{{num}}