1.父→子:在父級的標(biāo)簽里直接寫需要傳遞給子級的值,子級通過props屬性接收傳遞過來的值贵少。
1 ) . 父組件內(nèi):將需要傳遞給子組件的值通過v-bind? (如果傳遞的是固定值,則不需要v-bind八千,直接屬性名哆料,屬性值傳遞即可)。
2) .子組件內(nèi):在對應(yīng)的子組件中敷鸦,通過props屬性接收傳遞過來的值,并在子組件中使用該值寝贡。"注意:父組件向子組件傳遞的數(shù)據(jù)扒披,子組件是不允許改變的"(單向數(shù)據(jù)流)
子組件可以規(guī)定接收的類型:String、Object圃泡、Array碟案、Number、Boolean
default為默認(rèn)值
2.子→父:父組件通過v-on:eventName="parentEventName"來設(shè)置監(jiān)聽颇蜡,子組件通過$.emit('eventName')來觸發(fā)事件价说。
1).子組件內(nèi):
子組件內(nèi)部辆亏,利用$emit發(fā)布一個自定義事件。第一個參數(shù)為:發(fā)布的事件名鳖目;第二個參數(shù)為子組件向父組件傳遞的數(shù)據(jù)扮叨。↓
2).父組件內(nèi):
利用v-on(@)監(jiān)聽子組件的自定義事件
效果:當(dāng)點擊子組件的返老還童鍵领迈,父組件的年齡就會減2彻磁。(每點擊一下就會減一次2)
3.兄弟組件通信
1)找共同的父級,先傳給共同的父級狸捅,在由父級傳給兄弟級衷蜓。
2)事件總線Event Bus
new Vue 的實例上有兩個方法:$on(監(jiān)聽事件)、$emit(發(fā)布事件)薪贫,利用這樣的方式恍箭,只要能訪問到公用的實例,都可以隨意的監(jiān)聽發(fā)布任意事件瞧省。例:
? ? ? ? 兄弟級One和Two
? ? ? ? 當(dāng)點擊組件1「改名字」扯夭,組件2會將Jenny改為組件1傳遞過來的名字
1> main.js文件里面,作為插件,創(chuàng)建新的實例
2> 組件One
3> 組件Two
也可以直接訪問根實例$root鞍匾。
Event Bus的弊端:所有組件都可以改變數(shù)據(jù)交洗,數(shù)據(jù)改變無規(guī)則,且無法調(diào)試橡淑,會造成數(shù)據(jù)混亂构拳。(一般復(fù)雜的項目不建議使用)
4.跨級組件通信:Vuex(狀態(tài)管理)