Vue中的Bus(總線)實現非父子組件通訊

一、Bus 的實現

Vue2.0提供了Vuex進行非父子組件之間的通訊,但在簡單的場景下,能夠使用一個空的Vue實例做爲中央事件總線。html

實現代碼示例:vue

<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 => {     //監聽Vue示例 Bus 的某一個事件
      this.msg = content;
    });
  }
});
Vue.component('c2',{
  template: '<button @click="sendEvent">Say Hi</button>',
  methods: {
    sendEvent() {
      Bus.$emit('setMsg', 'Hi Vue!');  //觸發vue示例 bus 的某一個事件,而且將參數做爲數據傳過去
    }
  }
});
var app= new Vue({
    el:'#app'
})

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

// Bus.js
import Vue from 'vue'
const Bus = new Vue()
export default Bus

組件調用時先引入web

// 組件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,致使不能正常通訊app

1.一、推薦使用Bus的方式

(1)直接將Bus注入到Vue根對象中this

import Vue from 'vue'
const Bus = new Vue()
var app= new Vue({
    el:'#app',
   data:{
    Bus
    }  
})

在子組件中經過this.$root.Bus.$on()、this.$root.Bus.$emit()來調用spa

(2)在一個教程視頻中看過,也能夠經過將Bus放在vue示例的原型對象中使用prototype

Vue.prototype.bus = new Vue();

每一個組件都是一個Vue示例,因此每一個組件都會有bus屬性,在組件中能夠經過 this.bus.$emit、this.bus.$on 來調用code

Vue.component('c2',{
  template: '<button @click="sendEvent">Say Hi</button>',
  methods: {
    sendEvent() {
      this.bus.$emit('setMsg', 'Hi Vue!');  
    }
  }
});

 

 

參考:http://www.javashuo.com/article/p-kmxnlwbz-gs.htmlcomponent

相關文章
相關標籤/搜索