vue中的父子通信,子父通信以及兄弟通信


父子通信

一般情況下不管是組件還是實例,自己的數據只能自己使用,

如果子組件想使用父組件的數據,我們可以通過props來接收自定義屬性的方式來將父組件的數據傳遞給子組件

具體流程如下:

1.在組件標簽上使用自定義屬性

2.在組件內部通過prop上來接收自定義屬性

3.接收完畢以后,就可以使用父組件的數據

我們結合實例來看

 

運行結果如下圖:

這里我們寫了一個實例,一個組件,在實例里面使用了這個組件模板,形成了一個嵌套關系

創建的實例里我們寫了一個數據money,我們可以在上面的實例里去使用它({{money}}),但是在組件里我們不能直接這樣去使用它。

我們通過props自定義屬性去使用,

第一步:先在子組件上創建一個自定義屬性

第二步:在創建的子組件中使用props去接收這個自定義屬性xixi,

 

 第三步:接收完成之后,我們就可以使用外層的數據,或者說父組件的數據

 

 注意:

1.我們一般寫的自定義屬性的屬性值都是固定的,如果想使用父組件的數據,必須用v-bind去進行屬性綁定

2.我們可以在子組件里使用父組件的數據,但是只能用不能改

 子父通信

和父子通信不同的是,子父通信是通過子組件使用$emit去觸發父組件的內置事件

直接上案例:

 

 我們先創建一個實例和組件,組件嵌套在實例中,我們先在實例中創建一個點擊事件,點擊彈出信息框顯示“點到我了”,

這時候我們可以在子組件實例化的標簽上創建一個自定義事件@custom並且在組件上創建一個點擊事件,

 

 

 

 在組件中的事件methods中就可以通過$emit去觸發父組件的事件

 

 兄弟通信

既然有子父通信和父子通信,那么就有兄弟通信,兄弟通信有幾種

兩個同級的組件進行通信,我們可以設置一個父組件,兩個子組件同時在這個父組件下,可以通過父組件去獲取數據和方法

(子組件1<——>父組件<——>子組件2)

直接上案例

 

 這次是兄弟組件1的按鈕控制兄弟組件2的div的顯示隱藏,我們設置一個父組件,通過父子通信將父組件的數據state傳遞給兄弟組件1,

 

 

 

 

 

 用的還是自動定義屬性傳遞,然后用props接收這時我們就可以用自定義屬性show的布爾值去控制兄弟組件1的顯示隱藏

我們可以在父組件中創建一個方法,可以改變show的布爾值

 

 然后通過自定義方法,讓兄弟組件2去調用父組件的這個方法

 

 

 

 

 

 先創建一個自定義屬性custom,然后在兄弟組件2的按鈕上添加一個點擊事件,通過$emit觸發這個事件,這樣就形成了兄弟通信

 


免責聲明!

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



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