父子通信
一般情況下不管是組件還是實例,自己的數據只能自己使用,
如果子組件想使用父組件的數據,我們可以通過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觸發這個事件,這樣就形成了兄弟通信