Vue非父子组件通信详解

发布时间：2020-12-17 02:55:44 所属栏目：百科来源：网络整理

导读：组件是Vue核心的一块内容，组件之间的通信也是很基本的开发需求。组件通信又包括父组件向子组件传数据，子组件向父组件传数据，非父子组件间的通信。前两种通信Vue的文档都说的很清楚，但是第三种文档上确只有下面的几句具体如何去实现却没有很详细的说明，

组件是Vue核心的一块内容，组件之间的通信也是很基本的开发需求。组件通信又包括父组件向子组件传数据，子组件向父组件传数据，非父子组件间的通信。前两种通信Vue的文档都说的很清楚，但是第三种文档上确只有下面的几句

具体如何去实现却没有很详细的说明，于是自己试着进行了实现。先看下简单的通信效果：

就是点击了一个组件，另一个组件的数字递加。

html如下：

再来看一下如何实现每一个组件：

Vue.component('component-a',{
template: <div><button @click="incrementB">{{masgA}}</button></div>,//添加点击事件incrementB,因为点击A需要增加B
data () {
return {
masgA : 0
}
},methods: {
incrementB: function () { //增加B的事件
bus.$emit('incrementB') //中转站bus 触发incrementB事件
}
},mounted: function () {
var _this = this
bus.$on('incrementA',function(){ //中转站bus自定义increamentA事件用来增加msgA，这个事件最终由组件B进行触发
_this.masgA ++
})
　　　　　　　//bus.$on('incrementA',()=>{ //这里也可以用箭头函数，就不会有_this这个变量了，因为箭头函数不会改变this指向
　　　　　　　//　this.masgA ++
　　　　　　 //})
}
})

从上面的代码可以看出真正的改变方法是通过bus里注册监听事件来实现的，同理代component-b也是一样

`,data () { return { masgB : 0 } },methods: { incrementA: function () { bus.$emit('incrementA') } },mounted: function(){ bus.$on('incrementB',() => { this.masgB ++ }) } })

完整代码如下，可直接复制运行

非父子组件通信

同时也可以看出这么做仅有两个组件就有些麻烦，事件的流向不是很清晰，所以在出现复杂的场景时需要使用VueX进行管理。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!