vue父子組件雙向綁定數據


我們在封裝組件時,最常使用的父子組件通信方法是props傳值,$emit修改,在一些情況中這些必要的操作會顯得很麻煩,顯得代碼很啰嗦,甚至不利於某些功能實現。父組件必須傳入值、觸發事件,子組件必須接收值、觸發事件調用$emit回調。

這種情況下可以使用.sync修飾符雙向綁定數據,使子組件可以直接修改綁定數據。代碼如下:

父組件:

<view :data.sync="Data"></view>

 

子組件:

this.$emit('update:data', Data)

 

使用.sync修飾符與原來傳值方法只有兩處區別,父元素傳值屬性后的修飾符.sync和子組件$emit('updata:~'),這樣可以簡略一些操作步驟,使得代碼看起來更清新簡潔。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM