兄弟组件之间通信
发布时间
阅读量：
阅读量
兄弟没有共同的父级
创建空的Vue实例对象
// main.js
// 创建空的Vue实例
const instance = new Vue()
// 把Vue空实例挂载到Vue的 prototype 上面
instance.eventBus === Vue.prototype.eventBus
创建a组件
改写说明
创建b组件
我是child - b组件
在a组件中通过this.eventBus.$emit进行数据的传递
this.eventBus.$emit('sendData', this.dataA)
在b组件中通过this.eventBus.$on进行数据的监听接收
this.eventBus.$on('sendData', val => {
this.receiveData = val
})
完整代码
// main.js
// 创建空的Vue实例
var eventBus = new Vue()
// 把Vue空实例挂载到Vue的原型上面
Vue.prototype.eventBus = eventBus我是child - a组件我是child - b组件:{{ receiveData }}
总结
非空实例方法简述, 它的一个显著特点是无需分析组件间的结构嵌套关系, 无需关心是否存在共同的父级, 因为这种通信机制只需知道任意两个组件之间的通信需求即可, 一个组件设置$emit, 另一个组件$on监听即可, 当项目规模增大时容易导致混乱或难以管理, 这个问题可以通过Vuex（终极解决方案）来解决
全部评论 (0)
还没有任何评论哟~