vue bus的使用

有时候两个组件也需要通信（非父子关系）。当然Vue2.0提供了Vuex，但在简单的场景下，可以使用一

个空的Vue实例作为中央事件总线。

新建一个  Bus.js  在里面写上

import Vue from 'vue'

const Bus = new Vue()

export default Bus

组件调用时先引入

组件1

import Bus from './Bus'

export default {

    data() {

        return {

            }},

  methods: {

        Bus.$emit('log', 120)         //传入

    }, } 

组件2

import Bus from './Bus'

export default {

    data() {

        return {} },

    mounted () {

      Bus.$on('log', content => {                   //接收

          console.log(content) });   }   }

问题：但这种引入方式，经过webpack打包后可能会出现Bus局部作用域的情况，即引用的是两个不同的Bus，导致不能正常通信

解决：

第①种：可以直接将Bus注入到Vue根对象中。

import Vue from 'vue'

const Bus = new Vue()

var app= new Vue({

    el:'#app',

　　 data:{

　　　　Bus

    }

})

 然后在子组件中通过this.$root.Bus.$on(),     

 this.$root.Bus.$emit()来调用

第②种：将bus挂载到vue.prototype上，

import Vue from 'vue';

// 设置eventBus

Vue.prototype.$bus = new Bus();

组件一中定义

mounted () {

    this.$bus.$on('updateData', this.getdata);

}

组件二中调用

this.$bus.$emit('updateData', {loading: false});

注意：注册的总线事件要在组件销毁时卸载，否则会多次挂载，造成触发一次但多个响应的情况

beforeDestroy () {

        this.bus.$off('updateData', this.getData);

}