1、为什么使用事件总线
在vue中用到的最多的组件之间传值就是父子组件传值和兄弟之间传值,但是这两种有缺陷,当两个组件并非父子和兄弟时,只用这两种方式太麻烦,于是可以用vuex统一管理状态,除了vuex还可以用事件总线(EventBus)的方式传值,不管哪个组件都能获取得到。
2、如何使用
(1)创建eventBus.js文件
import Vue from 'vue'
export default new Vue;
(2)在main.js文件中全局引入,然后挂载到vue原型上
import bus from './utils/eventBus'
Vue.prototype.bus = bus;
(3)发送事件
用this.bus.$emit(‘事件名’,参数) 进行传参
比如点击a组件的按钮给b组件传参
// a组件
<button @click="toB()">点击给b组件传值</button>
// js
methods: {
toB() {
this.bus.$emit("name", 'a组件的值');
}
(4)接收参数
在mounted中 通过this.bus.$on(‘事件名’,()=>{}) 接收参数
mounted() {
this.bus.$on("name", (aName) => {
// aName就是a组件传来的值 此时b组件就可以对传过来的值进行操作了
console.log(aName)
this.bName = aName
});
}
(5)销毁事件总线
在beforeDestroy中销毁 $off
beforeDestroy() {
//组件销毁前要解绑事件
this.bus.$off("name");
},