你們好！我是木瓜太香！javascript
衆所周知，組件式開發方式給咱們帶來了方便，不過也引入了新的問題，組件之間的數據就像被一道無形的牆隔開，若是咱們但願臨時讓兩個組件直接通訊，vuex 太巨，而 $emit 又很差維護 provider 不可控 這個時候就該今天的主角 vue-communication 登場了！前端
vue-communication介紹
- 他是一個可觀測可調試的vue組件通訊方案
- 任意關係組件可直接通訊
- 支持跨組件監聽數據變化
- 支持發送離線數據
安裝
yarn add vue-communication // 或者 npm install vue-communication -D
引入
import { $sender, $receiver } "vue-communication";
Vue.prototype.$sender = $sender;
Vue.prototype.$receiver = $receiver;
視頻教程
視頻地址vue
用法
基本概念：java
該組件暴露兩個主要 API 一個是發送者 $sender 一個是接受者 $receiver，全部的通訊都經過這兩個方法來實現，這裏但願你們將 $sender 理解成發送意圖的發送者，他發送的是意圖，意圖就是但願作一件什麼事情。web
意圖類型： dataOnce modifyOnce data modify watchvuex
目前只有以上5種意圖分別涵蓋了：發送數據的一次和屢次，修改數據的一次和屢次，跨組件監聽數據變化shell
發送數據：npm
假如 A 組件只向 B 組件發送一次數據：微信
A 組件中直接使用 this.$sender("dataOnce-A-B",{d: "我是數據"})ide
B 組件中在任意時刻（哪怕B都還沒掛載都行，放心食用）使用this.$receiver("dataOnce-A-B") 這個函數返回一個 Promise 對象，直接 .then 接收便可
發送屢次就用 this.$sender("data-A-B","我是數據") ，該方法調用屢次，對應組件就會屢次接收該數據
接收會有變化，因爲會屢次接收因此沒法使用 Promise 來實現，請在參數追加回調this.$receiver("data-A-B",function(data){ // data就是數據 })
注意：
這裏面的 意圖修飾符-組件1-組件2 的格式是強制的，無論你的組件名有多長，你都要完整的給出！下面的修改數據也同樣，對應到 data-A-B 這個案例，其整個字符串能夠稱爲一個「意圖」，data 叫作意圖修飾符。
接收回執：
我相信你們都明白一個道理，若是委託 A 給 B 送東西，在 A 送到以後不該該默不吭聲的就完了，而是應該告訴你一聲，嘿！你讓我送的東西我已經送到了哦！這就是回執。
須要注意的是回執目前只有在一次性操做中才會有，例如 dataOnce modifyOnce
他們經過 $sender返回的 Promise 對象給出，讓發送者能夠知道，我發送的數據何時被接收了
this.$sender("dataOnce-A-B","木瓜太香")
.then(flag => {
console.log("接受者已經接受到數據了！")
})
修改數據：
A 組件中使用 this.$sender("modifyOnce-A-B","name","木瓜太香") 表示 A 組件要修改 B 組件中的 name 屬性把他變爲 木瓜太香
B組件中使用 this.$receiver("modifyOnce-A-B","name") 便可完成修改，注意第二個參數必須傳，這是一個許可，表示你承認 A 組件修改當前組件的 name 屬性，若是你寫錯了或者沒傳那麼許可不成立，這是一個讓數據變更可預測也強迫開發者須要更清楚本身在作什麼的一個實現。
若是你要改 obj 對象下的 name 那麼能夠寫成 this.$sender("modifyOnce-A-B","obj.name","木瓜太香")
若是你要修改屢次能夠參照 data 意圖的示例，使用 modify 意圖修飾符便可，注意，目前修改是沒有回調的，若是你想知道數據何時被修改，能夠本身在組件內部監聽。
跨組件監聽數據：
假如 A 組件要監聽 B 組件中的 name 數據變更：
A 組件使用 this.$sender("watch-A-B","person.name",function(nv,ov){ // nv 表示新值 ov 表示舊值 })
B 組件只須要給出一次許可便可： this.$receiver("watch-A-B","person.name")
我本身建了一個web前端的交流裙有興趣的能夠加入進來交流哦：245650187（免費）237871108（收費）。 我的微信： GD6570 我的球球：718879459 固然你也能夠嗶哩嗶哩搜索木瓜太香