Vue项目实战（四）- 组件之间的通信

友情链接

Vue项目实战（一）- 从0到1的蜕变
Vue项目实战（二）- 引入JQuery等第三方库
Vue项目实战（三）- 组件的注册和使用
Vue项目实战（四）- 组件之间的通信

组件之间的通信原理

其实组件之间的通信非常简单，只需要简单的加一个第三方事件管理器就可以了，比如在组件A中点击某个按钮想要通知组件B做一些操作，
那么只需要让组件A告诉管理器我想要触发某事件，而组件B只需要监听这个事件，就可以被触发，关系图如下：

组件之间的通信实践

现在上具体代码

1、添加eventBus作为事件枢纽，放在src/assets里面，命名为eventBus.js

//代码很少，就两行就可以了
import Vue from 'vue'
export default new Vue

2、在组件A中触发某事件，代码也很简单，只需要两步骤

//在script标签内最开始导入bus文件
import bus from "../assets/eventBus"

//在Vue事件中使用bus，这是一个点击事件，点击后通过$emit来注册事件
//其中test是向事件中枢注册的事件名，index是参数
itemClick:function(index,event){
    bus.$emit("test",index);
}

3、在组件B中监听事件test，当组件A触发test时，这里就能执行相应的操作

//第一步同样是导入bus文件
import bus from "../assets/eventBus"

/*
* 监听事件test，放在mounted里面即可
* 当监听到test事件是触发后面的匿名回调函数
* 注意回调函数中Vue的数据不能通过this来访问，而是需要在外面将this赋给一个变量
*/
mounted(){
    var self = this;
    bus.$on("test",function(msg){
    self.currentWebIndex = msg;
    });
},