我們使用 vue 的程序中，會有很多時候要用到組件間的通信， 組件間的通信也有很多種， 比如 父子組件通信， 兄弟組件通信，任意組件間的通信
解決組件間的通信也有很多方法，
$emit 父子組件的通信可用
事件的訂閱與發布（npm i pubsub-js） 訂閱發布檔案 任意組件通信可用
vuex 任意組件通信可用 比較重
全域事件總線 任意組件通信可用
這里我們來介紹一下，全域事件總線的用法，它相對來說輕量一點， 使用比較方便
先來說一下， 全域事件總線的設計思路
我們知著， 在 vueComponet 上面可以使用 $on $emit $off 來系結， 觸發， 和解綁事件， 同樣的 我們在 mian.js 中的 vm = new Vue(…) , 這個vm 身上也具有這樣的功能， 而 vm 身上的所有方法和屬性， vue 的組件中都是可以使用的，所有， 我們想的是把所有的事件， 都系結在 vm 的身上， 同樣的， 每一個 組件 （VueComponent） 也可以使用 $emit $off $on 在 vm 的身上來動態的系結 ， 觸發事件
...
var vm =new Vue({
router,
store,
render:h=>h(App)
}).$mount('#app')
// 注意， 這樣寫是一個錯誤的
//我們來分析一下代碼， 我們在 Vue的原型上面添加一個$bus 其值是vm
//但是我們看， vm 在前面已經new 過了， 它的里面沒有 $bus ，
//所以這樣寫的結果就是 vueComponet 子組件中， 根本就沒有 $bus 的屬性
Vue.prototype.$bus = vm;
-=-------------------------------------------------------------
//上面的寫法錯誤的原因是因為 Vue.prototype.$bus = vm; 寫在了 new Vue(....)的后面， 那么我們把它寫在前面可以嗎
Vue.prototype.$bus = vm;
var vm =new Vue({
router,
store,
render:h=>h(App)
}).$mount('#app')
//這樣做也是不對的， vm 物件還沒有 new 出來， 你就要拿著它信原型上面加， 肯定也是不行的
正確的寫法 是利用了vue 的一個 生命周期鉤子 beforeCreate
...
new Vue({
router,
store,
render:h=>h(App),
beforeCreate(){
Vue.prototype.$bus = this;
}
}).$mount('#app')
有了上面的 事件總線， 我們就可以把所有的事件，都注冊到 vm 的上面， 實作組件間的通信
下面是一個兄弟組件的通信
這是一個 School 組件， 它想接收到 student 組件傳送過來的資料
這是一個student 組件， 它要給 School 組件發送資料
以上就是全域事件總線的使用方法
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/319768.html
標籤：其他
上一篇：ES6 知識點總結(學生)
下一篇：從CURL回應中抓取特定行