父子組件之間的雙向綁定非常簡單，但是很多人因為是從Vue 2+開始使用的，可能不知道如何雙向綁定，當然最簡單的雙向綁定（單文件中）就是表單元素的 v-model 了，例如 <input type="text" /> 它會響應表單元素的 value 屬性，當輸入框文本改變時，會將 value 值傳給 v-model 所綁定的變量，如果同時設置 v-model 和 value ， value 屬性無效。

父子組件的自定義雙向 v-model

當若干dom封裝成組件時，在父組件中使用子組件時，卻無法在子組件標簽上使用 v-model ，因為子組件標簽不是表單元素,這個時候，我們需要自定義我們想要的 v-model 規則。

<!-- children.vue --><template> <h1>{{ msg }}</h1></template><script>export default{ model:{  prop:'msg',//這個字段，是指父組件設置 v-model 時，將變量值傳給子組件的 msg  event:'parent-event'//這個字段，是指父組件監聽 parent-event 事件 }, props:{  msg:String //此處必須定義和model的prop相同的props，因為v-model會傳值給子組件 }, mounted(){ //這里模擬異步將msg傳到父組件v-model，實現雙向控制  setTimeout(_=>{   let some = '3秒后出現的某個值';//子組件自己的某個值   this.$emit('praent-event',some);   //將這個值通過 emit 觸發parent-event，將some傳遞給父組件的v-model綁定的變量  },3000); }}</script><!-- parent.vue --><template> <children v-model="parentMsg"></children></template><script>import children from 'path/to/children.vue';export default{ components:{  children }, data(){  return{   parentMsg:'test'  } }, watch:{  parentMsg(newV,oldV){   console.log(newV,oldV);   //三秒后控制臺會輸出   //'3秒后出現的某個值','test'  } }}</script>

你學會組件的自定義 v-model 了嗎 ？ 如果是普通的表單元素，同理，監聽表單的 input 或者 change 事件，實時將 value 或者 checked 通過 $emit 傳遞就可以了。

父子組件的自定義多個雙向值

上述例子，是實現單個prop值的雙向綁定，當組件的需求需要復雜的操作，需要多個雙向值，是如何實現的呢。這里需要用到以前被vue拋棄，后來又回歸的 .sync 修飾符。

事實上，這個比 v-model 更加簡單

<!-- children.vue --><template> <h1>{{ msg }}</h1></template><script>export default{ props:{  msg:String }, mounted(){ //這里模擬異步將msg傳到父組件v-model，實現雙向控制  setTimeout(_=>{   let some = '3秒后出現的某個值';//子組件自己的某個值   this.$emit('update:msg',some);   //將這個值通過 emit   //update為固定字段，通過冒號連接雙向綁定的msg，將some傳遞給父組件的v-model綁定的變量  },3000); }}</script><!-- parent.vue --><template> <children :msg.sync="parentMsg"></children> <!-- 此處只需在平時常用的單向傳值上加上.sync修飾符 --></template><script>import children from 'path/to/children.vue';export default{ components:{  children }, data(){  return{   parentMsg:'test'  } }, watch:{  parentMsg(newV,oldV){   console.log(newV,oldV);   //三秒后控制臺會輸出   //'3秒后出現的某個值','test'  } }}</script>