1. 父組件向子組件傳值
??? 子組件在props中創(chuàng)建一個(gè)屬性酱畅,用以接收父組件傳過(guò)來(lái)的值
??? 父組件中注冊(cè)子組件
??? 在子組件標(biāo)簽中添加子組件props中創(chuàng)建的屬性
??? 把需要傳給子組件的值賦給該屬性
2. 子組件向父組件傳值
子組件中需要以某種方式例如input事件的方法來(lái)觸發(fā)一個(gè)自定義事件
將需要傳的值作為$emit的第二個(gè)參數(shù)级遭,該值將作為實(shí)參傳給響應(yīng)自定義事件的方法
在父組件中注冊(cè)子組件并在子組件標(biāo)簽上綁定對(duì)自定義事件的監(jiān)聽(tīng)
?
3. 父子組件相互傳值
例子效果:父組件和子組件中各有一個(gè)input標(biāo)簽和一個(gè)p標(biāo)簽纷责,通過(guò)父組件或子組件中的input進(jìn)行編輯,同步更改4個(gè)標(biāo)簽的顯示內(nèi)容梧田。
4. vue的$emit(event,[...args])
觸發(fā)當(dāng)前實(shí)例上的事件狡赐。附加參數(shù)都會(huì)傳給監(jiān)聽(tīng)器回調(diào)。
子組件通過(guò)$emit觸發(fā)父組件上綁定的自定義事件翔怎,將自身數(shù)據(jù)作為參數(shù)傳入事件函數(shù),在父組件的事件函數(shù)中將參數(shù)賦值給父組件的對(duì)應(yīng)變量。
示例赤套,App.vue中v-on為組件綁定事件(自定義事件)飘痛,子組件通過(guò)$emit觸發(fā)事件
總結(jié):無(wú)論是子組件向父組件傳值還是父組件向子組件傳值,他們都有一個(gè)共同點(diǎn)就是有中間介質(zhì)容握,子向父的介質(zhì)是自定義事件宣脉,父向子的介質(zhì)是props中的屬性。