vue父子組件數(shù)據(jù)傳輸以及實現(xiàn)父子組件數(shù)據(jù)雙向綁定

1.父傳子,子接受用props

? a.父組件中要做的事情

? ? ? 在父組件中引入子組件:

并在components中聲明該組件

b.子組件中要做的事情

? ? ?在子組件中props的方式接受,這里有兩種方法:props:['rules','model'],還有就是圖片中對象的方式,只是對象的方式能夠設(shè)定傳值的類型。

在子組件中的使用如第二個紅色的標出的部分,直接使用? this.rules

2.子傳父,子用$emit(派發(fā)自定義事件)

父子組件間傳值是單向數(shù)據(jù)流,即父傳子,但是子不能修改被傳過來的數(shù)值,如果子要修改還需通知父組件來修改(目前學到的內(nèi)容來說是這樣的),所以父傳子的時候,是傳遞事件,并在父組件中調(diào)用該函數(shù)

a.父組件要做的

在父組件中引入子組件,如圖所示


第二幅圖,即為綁定的事件傳參即為子傳給父的數(shù)據(jù)

b.子組件

3.父子組件數(shù)據(jù)的雙向綁定

在子中改父中也可以檢測到,就像v-model一樣,(v-model是value="inputvalue" @input="inputHandler"封裝的語法糖)

在子組件中的設(shè)置:


此處的 :value="inputvalue" @input="inputHandler" 就是實現(xiàn)與父組件雙向綁定的關(guān)鍵

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容