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

vue-communication介紹

安裝

yarn add vue-communication// 或者 npm install vue-communication -D

引入

import { $sender, $receiver } 'vue-communication';Vue.prototype.$sender = $sender;Vue.prototype.$receiver = $receiver;

視頻教程

復制代碼 代碼如下:<iframe src='https://player.bilibili.com/player.html?bvid=BV1sD4y1d7mD&page=1' scrolling='no' border='0' frameborder='no' framespacing='0' allowfullscreen='true' style='min-height: 400px'> </iframe>

用法

基本概念：

該組件暴露兩個主要 API 一個是發送者 $sender 一個是接受者 $receiver ，所有的通信都通過這兩個方法來實現，這里希望大家將 $sender 理解成發送意圖的發送者，他發送的是意圖，意圖就是希望做一件什么事情。

意圖類型： dataOnce modifyOnce data modify watch

目前只有以上5種意圖分別涵蓋了：發送數據的一次和多次，修改數據的一次和多次，跨組件監聽數據變化

發送數據：

假如 A 組件只向 B 組件發送 一次 數據：

A 組件中直接使用 this.$sender('dataOnce-A-B',{d: '我是數據'})

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')

到此這篇關于vue任意關系組件通信與跨組件監聽狀態vue-communication的文章就介紹到這了,更多相關vue 任意關系組件通信與跨組件監聽狀態內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！