1、v-model

先看示例：

//父組件<template><ChildComponent v-model="parentData" />
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent},data() {return {parentData: '' // 初始值}}
}
</script>

如上，在父組件中，使用v-model給子組件傳遞一個值，實現的數據的雙向綁定。實際上呢，原理是在子組件上定義了一個自定義事件@input，并且給子組件傳遞了一個value值。

以上代碼其實等同于：

<template><ChildComponent :value="parentData" @input="handleInput" />
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent},data() {return {parentData: '' // 初始值}},methods:{handleInput(val){this.parentData=val;}}
}
</script>

在子組件中，你要通過props接收父組件傳過來的value的值，然后呢，當接收到的value的值發生改變的時候，通過$emit觸發自定義事件‘input’,將新值傳給父組件，以便父組件中改變相應的值。

如下：

export default {props: ['value'],methods: {updateValue(newVal) {this.$emit('input', newVal)}}
}

2、.sync修飾符

看示例：

<!-- 父組件 -->
<Child :title.sync="parentTitle" />

等價于

<Child :title="parentTitle" @update:title="parentTitle = $event" />

典型使用場景：

1. ?表單組件封裝?
   實現輸入控件值與父組件數據的實時同步。

   <!-- 父組件 -->
   <CustomInput :value.sync="inputValue" /><!-- 子組件 CustomInput -->
   <input :value="value" @input="$emit('update:value', $event.target.value)">
   

2. ?多屬性同步?
   通過對象語法批量綁定多個 prop：

   <ChildComponent v-bind.sync="doc" />  <!-- 自動綁定 doc 對象的每個屬性 -->
   

   示例：

v-model和.sync修飾符都是實現數據雙向綁定的方案，他們誕生的目的都是為了簡化代碼的書寫。