標簽: Vue
問題:
在 Vue 文檔中可以知道徐许,子組件想要改變父組件的數(shù)據(jù),必須在子組件使用 this.$emit('事件名', data)
來向父組件傳遞數(shù)據(jù)曲初,父組件在組件標簽上使用 @時件名.native='onSubmit'
來觸發(fā)事件体谒,獲取子組件傳遞過來的值。
但是臼婆,在 element-ui
使用過程中抒痒,發(fā)現(xiàn) el-dialog
組件,不用在組件標簽上創(chuàng)建自定義事件目锭,就可以改變父組件值评汰。
簡而言之: 子組件可以直接改變父組件傳遞過來的 prop 值。
父組件:
綁定一個 title
屬性痢虹,并添加 .sync
修飾符
<text-document v-bind:title.sync="doc.title"></text-document>
子組件:
觸發(fā) emit
方法被去,必須加上 update:
關鍵詞,可以將 $emit
傳遞給父組件的值奖唯,替換成對應的綁定值惨缆。
本例中,子組件的 newTitle
賦值給父組件的 title
this.$emit('update:title', newTitle)
注意事項:
.sync
修飾符不允許傳入表達式丰捷,比如:
<text-document v-bind:title.sync="doc.title + 'hello'"></text-document>