频道导航

Vue非父子组件通信详解

2019-01-07 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 ++ }) } })

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

<Meta charset="UTF-8"> 非父子组件通信

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

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