我們在封裝組件時,最常使用的父子組件通信方法是props傳值,$emit修改,在一些情況中這些必要的操作會顯得很麻煩,顯得代碼很啰嗦,甚至不利於某些功能實現。父組件必須傳入值、觸發事件,子組件必須接收值、觸發事件調用$emit回調。
這種情況下可以使用.sync修飾符雙向綁定數據,使子組件可以直接修改綁定數據。代碼如下:
父組件:
<view :data.sync="Data"></view>
子組件:
this.$emit('update:data', Data)
使用.sync修飾符與原來傳值方法只有兩處區別,父元素傳值屬性后的修飾符.sync和子組件$emit('updata:~'),這樣可以簡略一些操作步驟,使得代碼看起來更清新簡潔。