Vue父子组件双向绑定传值的实现方法

父子组件之间的双向绑定非常简单，但是很多人因为是从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>