使用①:改變上一個 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接收后發布出去即可。