關於Vue 兄弟組件通信

最近項目中遇到希望在操作路由組件裏面內容的時候可以影響共用組件Header組件(這個其實就是他的兄弟組件)的操作。

 意思就是 router-view指向的router來影響Header組件的信息

首先需要的是在routr-view指向的組件(我這裏用的是login組件,接下來就用login來說了)   添加$emit去向父組件傳遞參數並且觸發父組件的自定義事件。

然後在父組件中添加自定義事件

自定義事件就可以去影響兄弟組件的傳給它的子組件的props

 

綁定refurbish(props) 進入Header組件。

 在Header中接收props

並且在watch鉤子函數中監聽props的變化時候你需要的頁面邏輯處理。

 

這次遇到的坑: this.$emit觸發父親傳遞數據的時候 因爲我只是需要一個標示 所以我傳入的是Boolen值 =====> .

               那麼這會導致除了第一次操作意外。之後的所有操作都不會觸發。因爲true一直是沒有變化的。所以這時候你就需要將boolean類型轉化成引用類型 這樣每次傳入的數據都是有變化的 就會觸發事件了。詳細可以去了解基本類型和引用類型。

 

原文出處:https://www.cnblogs.com/liaoyanhui/p/10564428.html

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章