16 消息的訂閱--發布機制


使用①:改變上一個 github user 的 組件通信方式

在上面一篇 search github users 中,Search 組件和 List 組件 的通信 是通過 props 完成的,且中間需要父組件APP 的參與,

下面 我們使用消息的 發布 --- 訂閱 機制 ,以這種模式 實現 Search 組件和 List 兄弟組件之間的通信。

使用 Pub / Sub 之前,我們需要安裝這個庫,npm install --save pubsub-js

然后在需要使用到這個的組件中 引入  import PubSub from   ' pubsub-js ' 才能使用

 

首先,Search 按鈕點擊后,我們拿到了輸入框中用戶數據的值,Search 組件 就需要發布消息(即發布用戶輸入的這個值),

然后,List 組件 訂閱消息,注意是初始化的時候就會訂閱消息

這樣就成功 使用 發布--訂閱 機制 實現了 組件 之間的通信

 

使用②:前面還有一個評論管理的案例中,Item 組件 中點擊刪除按鈕時 調用 父組件 傳過來的 刪除事件,實現刪除,而 父組件 傳遞給子組件的 delData 方法 是通過 props 方法傳遞,所以必須經過 List 組件。

下面我們使用 消息的 發布---訂閱 機制 不通過 List 組件,直接讓父組件APP  和 Item 組件實現通信(傳遞 delData 方法)

首先,Item 組件中,點擊刪除按鈕后,發布消息

接着,APP 組件中,初始化時就訂閱消息

這樣,我們就實現了 APP 和 Item 之間的直接通信

中間,我犯了一個錯誤,因為 Item 發布消息時我們需要發布這個Item 的索引,而Item的索引來源於 List 的 map 結構中,因此我直接用 Map 中的 key 作為 索引讓Item接收並在發布消息時發布,

而這時,控制台報錯信息時:The ' key '  is not a prop ,說明 不能直接用 key 作為屬性傳遞,因而 在 List 傳遞 索引給 Item 中,我重新定義了一個屬性 index,傳遞給 Item,Item接收后發布出去即可。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM