vue兄弟組件傳值,父子組件相互傳值

一、實現父組件向子組件(動態)傳值

步驟1:
要在父組件中引入名爲content的子組件。
父組件data中定義一個值msg(可爲任意名稱),在子組件增加一個參數用來存儲該值(本案例定義的msg)。
父組件代碼如下圖所示:
image.png
步驟2:
在子組件中定義props數組接收父組件傳來的msg。
props:["msg"]
在watch中監聽msg,值有變化即執行函數。
`

watch:{
    msg:{
        handler(){
            this.getList()
        }
    }
} 

`
子組件代碼如下圖所示:
image.png
即可實現父組件向子組件動態傳值。

二、兄弟組件傳值
案例爲組件1傳值給組件2(其中組件1和組件2是兄弟組件)

步驟1:
定義一個js文件,內容如下:
image.png
組件1代碼如下圖:
引入MSG,通過li點擊事件賦值,具體實現如下:
image.png
步驟2:
組件2接收組件1傳來的值
引入MSG,在界面內容加載完畢時獲取MSG中剛存儲的val,此時即獲取到了組件1傳來的值,具體實現如下圖:
image.png

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