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注入到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