眾所周知，組件式開發(fā)方式給我們帶來了方便，不過也引入了新的問題，組件之間的數(shù)據(jù)就像被一道無形的墻隔開，如果我們希望臨時(shí)讓兩個(gè)組件直接通信，vuex 太巨，而 $emit 又不好維護(hù) provider 不可控 這個(gè)時(shí)候就該今天的主角 vue-communication 登場(chǎng)了！

vue-communication介紹

• 他是一個(gè)可觀測(cè)可調(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;

視頻教程

用法

基本概念：

該組件暴露兩個(gè)主要 API 一個(gè)是發(fā)送者 $sender 一個(gè)是接受者 $receiver ，所有的通信都通過這兩個(gè)方法來實(shí)現(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 組件中在任意時(shí)刻（哪怕B都還沒掛載都行，放心食用）使用 this.$receiver("dataOnce-A-B") 這個(gè)函數(shù)返回一個(gè) Promise 對(duì)象，直接 .then 接收即可

發(fā)送多次就用 this.$sender("data-A-B","我是數(shù)據(jù)") ，該方法調(diào)用多次，對(duì)應(yīng)組件就會(huì)多次接收該數(shù)據(jù)

接收會(huì)有變化，由于會(huì)多次接收所以無法使用 Promise 來實(shí)現(xiàn)，請(qǐng)?jiān)趨?shù)追加回調(diào) this.$receiver("data-A-B",function(data){ // data就是數(shù)據(jù) })

注意：

這里面的 意圖修飾符-組件1-組件2 的格式是強(qiáng)制的，不管你的組件名有多長(zhǎng)，你都要完整的給出！下面的修改數(shù)據(jù)也一樣，對(duì)應(yīng)到 data-A-B 這個(gè)案例，其整個(gè)字符串可以稱為一個(gè)“意圖”，data 叫做意圖修飾符。

接收回執(zhí)：

我相信大家都明白一個(gè)道理，如果委托 A 給 B 送東西，在 A 送到之后不應(yīng)該默不吭聲的就完了，而是應(yīng)該告訴你一聲，嘿！你讓我送的東西我已經(jīng)送到了哦！這就是回執(zhí)。

需要注意的是回執(zhí)目前只有在一次性操作中才會(huì)有，例如 dataOnce modifyOnce

他們通過 $sender 返回的 Promise 對(duì)象給出，讓發(fā)送者可以知道，我發(fā)送的數(shù)據(jù)什么時(shí)候被接收了

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") 即可完成修改， 注意第二個(gè)參數(shù)必須傳，這是一個(gè)許可，表示你認(rèn)可 A 組件修改當(dāng)前組件的 name 屬性，如果你寫錯(cuò)了或者沒傳那么許可不成立，這是一個(gè)讓數(shù)據(jù)變動(dòng)可預(yù)測(cè)也強(qiáng)迫開發(fā)者需要更清楚自己在做什么的一個(gè)實(shí)現(xiàn)。

如果你要改 obj 對(duì)象下的 name 那么可以寫成 this.$sender("modifyOnce-A-B","obj.name","木瓜太香")

如果你要修改多次可以參照 data 意圖的示例，使用 modify 意圖修飾符即可，注意，目前修改是沒有回調(diào)的，如果你想知道數(shù)據(jù)什么時(shí)候被修改，可以自己在組件內(nèi)部監(jiān)聽。

跨組件監(jiān)聽數(shù)據(jù)：

假如 A 組件要監(jiān)聽 B 組件中的 name 數(shù)據(jù)變動(dòng)：

A 組件使用 this.$sender("watch-A-B","person.name",function(nv,ov){ // nv 表示新值 ov 表示舊值 })

B 組件只需要給出一次許可即可： this.$receiver("watch-A-B","person.name")

到此這篇關(guān)于vue任意關(guān)系組件通信與跨組件監(jiān)聽狀態(tài)vue-communication的文章就介紹到這了,更多相關(guān)vue 任意關(guān)系組件通信與跨組件監(jiān)聽狀態(tài)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論