最简单的双向绑定（单文件中）就是表单元素的v-model了，如果同时设置v-model和value，value属性无效。

自定义v-model：（不推荐）

child:
<template><h1>{{ msg }}</h1>
</template>export default{model:{prop:'msg', // 指父组件设置 v-model 时，将变量值传给子组件的 msgevent:'parent-event' // 指父组件监听 parent-event 事件},props:{msg:String // 此处必须定义和model的prop相同的props，因为v-model会传值给子组件},mounted(){// 这里模拟异步将msg传到父组件v-model，实现双向控制setTimeout(_=>{let some = '3秒后出现的某个值'; // 子组件自己的某个值this.$emit('parent-event', some);  //通过 emit 触发parent-event，将some传递给父组件的v-model绑定的变量}, 3000);}
}
</script>

parent:
<template><children v-model="parentMsg"></children>
</template>
<script>
import children from './children.vue';
export default{components:{children},data(){return{parentMsg:'test'}},watch:{parentMsg(newV, oldV){console.log(newV,oldV);//三秒后控制台会输出//'3秒后出现的某个值','test'}}
}
</script>

自定义多个双向值(推荐)：.sync修饰符

child:
<template><h1>{{ msg }}</h1>
</template>
<script>export default{props:{msg:String},mounted(){setTimeout(_=>{this.$emit('update:msg',some);},3000);}
}
</script>

parent:
<template><children :msg.sync="parentMsg"></children><!-- 此处只需在平时常用的单向传值上加上.sync修饰符 -->
</template>
<script>
import children from './children.vue';
export default{components:{children},data(){return{parentMsg:'test'}},watch:{parentMsg(newV,oldV){console.log(newV,oldV);}}
}
</script>

链接：https://juejin.im/post/5b5c2d986fb9a04f897840ac
来源：掘金