標簽： 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: 關(guān)鍵詞，可以將 $emit 傳遞給父組件的值，替換成對應(yīng)的綁定值。
本例中，子組件的 newTitle 賦值給父組件的 title

this.$emit('update:title', newTitle)

注意事項：

.sync 修飾符不允許傳入表達式，比如：
<text-document v-bind:title.sync="doc.title + 'hello'"></text-document>