【Vue基础】-事件中央总线

在官网中却没有提到中央总线的概念，这也是一道常见的面试题

我简单的描述下：

组件A和组件B互为兄弟组件，他们的传值实际共用一个Vue实例，通过组件A一个按钮事件触发$emit这个实例方法，然后在组件B的created或者mounted这个钩子函数中通过$on这个实例方法接收，最后在组件B的beforeDestroy或者destroyed这个钩子函数中$off清除事件。

第一种写法:

//bus.js文件
import Vue from 'vue'
export let bus = new Vue()

// main.js文件
import Vue from "vue";
import {bus} from '../bus.js'
Vue.prototype.$bus = bus

第二种写法(推荐第一种，少写个js文件)：

// main.js文件
import Vue from "vue";
Vue.prototype.$bus = new Vue()

兄弟组件间的实际操作

// brotherOne.vue文件
 methods:{
    sendMsg(){
      this.$bus.$emit('brotherMsg','发送组件2的信息，给到组件1')
    }
  }

// brotherTwo.vue文件
created(){
    this.$bus.$on("brotherMsg", (val) => {
      console.log(val, "brotherMsgbrotherMsg");
    });
}
destroyed() {
    this.$bus.$off('brotherMsg')
},

总结Tips:

• 组件销毁在v-if的判断下生效，v-show="false"并未销毁组件。
• 用到的vm.$emit、vm.$on、vm.$off及极容易忽视的beforeDestroy这个钩子。
• 在销毁组件一定$off清除事件，不然在重新进入组件时，这个事件依旧在事件队列里累加，从而出现多次触发事件的诡异现象。
• Vue中的插件npm i vue-bus -S,同样的原理只是用法稍稍不一样。