大家好探赫！我是木瓜太香！
眾所周知嘱能，組件式開發(fā)方式給我們帶來了方便吝梅，不過也引入了新的問題，組件之間的數(shù)據(jù)就像被一道無形的墻隔開惹骂，如果我們希望臨時讓兩個組件直接通信苏携，vuex 太巨，而 $emit 又不好維護(hù) provider 不可控 這個時候就該今天的主角 vue-communication 登場了对粪！
vue-communication介紹
- 他是一個可觀測可調(diào)試的vue組件通信方案
- 任意關(guān)系組件可直接通信
- 支持跨組件監(jiān)聽數(shù)據(jù)變化
- 支持發(fā)送離線數(shù)據(jù)
安裝
yarn add vue-communication
// 或者 npm install vue-communication -D
引入
import { $sender, $receiver } "vue-communication";
Vue.prototype.$sender = $sender;
Vue.prototype.$receiver = $receiver;
視頻教程
用法
基本概念：
該組件暴露兩個主要 API 一個是發(fā)送者 $sender 一個是接受者 $receiver右冻，所有的通信都通過這兩個方法來實現(xiàn)，這里希望大家將 $sender 理解成發(fā)送意圖的發(fā)送者著拭，他發(fā)送的是意圖纱扭，意圖就是希望做一件什么事情。
意圖類型： dataOnce modifyOnce data modify watch
目前只有以上5種意圖分別涵蓋了：發(fā)送數(shù)據(jù)的一次和多次儡遮，修改數(shù)據(jù)的一次和多次跪但，跨組件監(jiān)聽數(shù)據(jù)變化
發(fā)送數(shù)據(jù)：
假如 A 組件只向 B 組件發(fā)送一次數(shù)據(jù)：
A 組件中直接使用 this.$sender("dataOnce-A-B",{d: "我是數(shù)據(jù)"})
B 組件中在任意時刻（哪怕B都還沒掛載都行，放心食用）使用this.$receiver("dataOnce-A-B") 這個函數(shù)返回一個 Promise 對象峦萎，直接 .then 接收即可
發(fā)送多次就用 this.$sender("data-A-B","我是數(shù)據(jù)") ，該方法調(diào)用多次忆首，對應(yīng)組件就會多次接收該數(shù)據(jù)
接收會有變化爱榔，由于會多次接收所以無法使用 Promise 來實現(xiàn)，請在參數(shù)追加回調(diào)this.$receiver("data-A-B",function(data){ // data就是數(shù)據(jù) })
注意：
這里面的 意圖修飾符-組件1-組件2 的格式是強制的糙及，不管你的組件名有多長详幽，你都要完整的給出！下面的修改數(shù)據(jù)也一樣浸锨，對應(yīng)到 data-A-B 這個案例唇聘，其整個字符串可以稱為一個“意圖”，data 叫做意圖修飾符柱搜。
接收回執(zhí)：
我相信大家都明白一個道理迟郎，如果委托 A 給 B 送東西，在 A 送到之后不應(yīng)該默不吭聲的就完了聪蘸，而是應(yīng)該告訴你一聲宪肖，嘿表制！你讓我送的東西我已經(jīng)送到了哦！這就是回執(zhí)控乾。
需要注意的是回執(zhí)目前只有在一次性操作中才會有么介，例如 dataOnce modifyOnce
他們通過 $sender返回的 Promise 對象給出，讓發(fā)送者可以知道蜕衡，我發(fā)送的數(shù)據(jù)什么時候被接收了
this.$sender("dataOnce-A-B","木瓜太香")
.then(flag => {
console.log("接受者已經(jīng)接受到數(shù)據(jù)了壤短！")
})
修改數(shù)據(jù)：
A 組件中使用 this.$sender("modifyOnce-A-B","name","木瓜太香") 表示 A 組件要修改 B 組件中的 name 屬性把他變?yōu)?木瓜太香
B組件中使用 this.$receiver("modifyOnce-A-B","name") 即可完成修改，注意第二個參數(shù)必須傳慨仿，這是一個許可久脯，表示你認(rèn)可 A 組件修改當(dāng)前組件的 name 屬性，如果你寫錯了或者沒傳那么許可不成立镶骗，這是一個讓數(shù)據(jù)變動可預(yù)測也強迫開發(fā)者需要更清楚自己在做什么的一個實現(xiàn)桶现。
如果你要改 obj 對象下的 name 那么可以寫成 this.$sender("modifyOnce-A-B","obj.name","木瓜太香")
如果你要修改多次可以參照 data 意圖的示例，使用 modify 意圖修飾符即可鼎姊，注意骡和，目前修改是沒有回調(diào)的，如果你想知道數(shù)據(jù)什么時候被修改相寇，可以自己在組件內(nèi)部監(jiān)聽慰于。
跨組件監(jiān)聽數(shù)據(jù)：
假如 A 組件要監(jiān)聽 B 組件中的 name 數(shù)據(jù)變動：
A 組件使用 this.$sender("watch-A-B","person.name",function(nv,ov){ // nv 表示新值 ov 表示舊值 })
B 組件只需要給出一次許可即可： this.$receiver("watch-A-B","person.name")
我自己建了一個web前端的交流裙有興趣的可以加入進(jìn)來交流哦：245650187（免費）237871108（收費）。
個人微信： GD6570 個人球球：718879459 當(dāng)然你也可以嗶哩嗶哩搜索木瓜太香
