前言

10年積累的成都網(wǎng)站設(shè)計、網(wǎng)站建設(shè)經(jīng)驗，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你，你也不認(rèn)識我。但先網(wǎng)站制作后付款的網(wǎng)站建設(shè)流程，更有賀州免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

vue項目的一大亮點(diǎn)就是組件化。使用組件可以極大地提高項目中代碼的復(fù)用率，減少代碼量。但是使用組件最大的難點(diǎn)就是父子組件之間的通信。

子通信父

父組件

子組件

子組件使用$emit方法調(diào)用父組件的方法，達(dá)到子通信父的目的。

父通信子

父組件

子組件

父組件通過 $refs 調(diào)用子組件的方法。

以上就是父子組件通信的方式，父子組件傳遞數(shù)據(jù)直接用props，或者使用 $emit 和 $refs 依靠事件來傳遞數(shù)據(jù)。

父子組件通信提升篇

上文中，子通信父是在 子中觸發(fā)點(diǎn)擊事件 然后調(diào)用父組件的方法，父通信子是在 父中觸發(fā)點(diǎn)擊事件 調(diào)用子組件的方法。但是實際情況中可能存在 子通信父時子組件不允許有點(diǎn)擊事件 而事件在父中或者 父通信子時點(diǎn)擊事件在子組件 中。

子通信父時擊事件在父組件

這種情況其實很常見，例如提交一個表單時表單的內(nèi)容為子組件，而保存按鈕在父組件上。此時點(diǎn)擊保存按鈕想要獲取子組件表單的值。這種情況下已經(jīng)不單單是子通信父和父通信子了，需要將兩者結(jié)合在一起使用才能完成整個通信過程。

實現(xiàn)的思路是在父組件中點(diǎn)擊事件時，先通過父子通信調(diào)用子組件的方法，然后在子組件中的該方法里使用子父通信調(diào)用父組件的另一個方法并將信息傳遞回來。以下是代碼演示：

父組件

子組件

另一種情況思路也和這個一樣，基礎(chǔ)就在與父通信子和子通信父的靈活運(yùn)用。

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，謝謝大家對創(chuàng)新互聯(lián)的支持。