vue Bus總線

有時候兩個組件也須要通訊（非父子關係）。固然Vue2.0提供了Vuex，但在簡單的場景下，能夠使用一個空的Vue實例做爲中央事件總線。

參考：http://blog.csdn.net/u013034014/article/details/54574989?locationNum=2&fps=1

例子：https://segmentfault.com/q/1010000007491994

<div id="app">
    <c1></c1>
    <c2></c2>
</div>

 

var Bus = new Vue(); //爲了方便將Bus（空vue）定義在一個組件中，在實際的運用中通常會新建一Bus.js
Vue.component('c1',{ //這裏已全局組件爲例，一樣，單文件組件和局部組件也一樣適用
template:'<div>{{msg}}</div>',
  data: () => ({
    msg: 'Hello World!'
  }),
  created() {
    Bus.$on('setMsg', content => { 
      this.msg = content;
    });
  }
});
Vue.component('c2',{
  template: '<button @click="sendEvent">Say Hi</button>',
  methods: {
    sendEvent() {
      Bus.$emit('setMsg', 'Hi Vue!');
    }
  }
});
var app= new Vue({
    el:'#app'
})

在實際運用中，通常將Bus抽離出來:

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上（這裏用了插件的寫法）

// plugin/index.js
import Bus from 'vue';
let install = function (Vue) {
    ... ...
    // 設置eventBus
    Vue.prototype.bus = new Bus();
    ... ...
}

export default {install};

// main.js
import Vue from 'vue';
import plugin from './plugin/index';
... ...

Vue.use(plugin);

... ...

組件一中定義

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

組件二中調用

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

 注意：註冊的總線事件要在組件銷燬時卸載，不然會屢次掛載，形成觸發一次但多個響應的狀況

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