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:简写为:
< 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 } }, }

三、兄弟组件之间通讯
【uni-app组件之间的通讯--父子/兄弟组件之间传递数据】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.vuea组件更改该组件内容 < template> < view> 数据{{num}} < /view> < /template> < script> export default { data() { return { num:0, }; }, created(){ //创建全局监听自定义事件改变内容 uni.$on(‘changeNum‘,num=> { this.num+=num }) }, } < /script>