vue2.0父子組件通信以及同級組件通信


 

1.父向子通信

父組件為singer.vue.子組件為list-view.vue.需要把歌手的數據傳給子組件。則綁定 :data = 'singers' ,singers為父組件的值。data為子組件接收值的名稱

子組件采用props的方式接收、data 里面就是父組件傳過來的的值了。

值得注意的是。當定義子組件的值有參數時,props里面的default需要向data函數一樣寫

 

 2 子組件向父組件派發事件

(1)子組件做了一個點擊事件 selectItem(item),並傳遞了一個值

(2)methods里面。這個事件采用$emit的方式傳給父組件,並把值也傳出去

 

(3)然后父組件@select="selectSinger"這樣來接收子組件派發來的事件里面默認帶傳過來的參數

 

(4)然后父組件的methods里面就可以寫這個事件具體用來做什么的了。並且其參數 也能用

 

 

3 兄弟組件互相通信

兄弟組件顧名思義就是兩個同級組件。有時候也需要通信。那么簡單的我們可以這樣來操作

比如文中這樣,button和nav分別為不同的組件,需要 點擊button的時候,切換展示與隱藏nav。

那么我們就要用到兄弟組件通信來操作

 

(1)首先,需要創建一個單獨的空.js文件。比如 這樣

注冊一個空的 Vue 實例,作為 ‘中轉站’

 

 (2)在btn按鈕上綁定一個點擊事件

(3)那么我們就可以在事件里面來寫這個事件。 當然在寫之前要先引入這個’ 中轉站‘

(4)

在需要接收這個事件的nav組件

我們可以這樣操作。也是需要 先引入那個‘中轉站’eventBus.然后接收事件。注意此操作是在mounted(){}這個生命周期里進行的。

 


免責聲明!

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



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