Vue 非父子组件通信
组件是Vue核心的一块内容，组件之间的通信也是很基本的开发需求。组件通信又包括父组件向子组件传数据，子组件向父组件传数据，非父子组件间的通信。前两种通信Vue的文档都说的很清楚，但是第三种文档上确只有下面的几句
具体如何去实现却没有很详细的说明，于是自己试着进行了实现。先看下简单的通信效果：
就是点击了一个组件，另一个组件的数字递加。
html如下：
<div id="app"> <component-a></component-a> <component-b></component-b> </div>
再来看一下如何实现每一个组件：
var bus = new Vue() //首先建立一个空的Vue实例作为事件的中转
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也是一样
Vue.component('component-b',{
template: `<div><button @click="incrementA">{{masgB}}</button></div>`,
data () {
return {
masgB : 0
}
},
methods: {
incrementA: function () {
bus.$emit('incrementA')
}
},
mounted: function(){
bus.$on('incrementB',() => {
this.masgB ++
})
}
})
完整代码如下，可直接复制运行
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>非父子组件通信</title>
6 </head>
7 <body>
8 <div id="app">
9 <component-a></component-a>
10 <component-b></component-b>
11 </div>
12 <script src="https://unpkg.com/vue/dist/vue.js"></script>
13 </body>
14 <script>
15 var bus = new Vue() //首先建立一个空的Vue实例作为事件的中转
16
17 Vue.component('component-a',{
18 template: `<div><button @click="incrementB">{{masgA}}</button></div>`, //添加点击事件
19 data () {
20 return {
21 masgA : 0
22 }
23 },
24 methods: {
25 incrementB: function () {
26 bus.$emit('incrementB')
27 }
28 },
29 mounted: function () {
30 var _this = this
31 bus.$on('incrementA',function(){
32 _this.masgA ++
33 })
34 bus.$on('incrementA',()=>{
35 this.masgA ++
36 })
37 }
38 })
39
40 Vue.component('component-b',{
41 template: `<div><button @click="incrementA">{{masgB}}</button></div>`,
42 data () {
43 return {
44 masgB : 0
45 }
46 },
47 methods: {
48 incrementA: function () {
49 bus.$emit('incrementA')
50 }
51 },
52 mounted: function(){
53 bus.$on('incrementB',() => {
54 this.masgB ++
55 })
56 }
57 })
58
59 var vm = new Vue({
60 el: "#app"
61 })
62 </script>
同时也可以看出这么做仅有两个组件就有些麻烦，事件的流向不是很清晰，所以在出现复杂的场景时需要使用VueX进行管理。
本文结束，有任何不同的意见欢迎在留言区讨论。
