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

<!-- 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{
 ponents:{
  children
 },
 data(){
  return{
   parentMsg:'test'
  }
 },
 watch:{
  parentMsg(newV,oldV){
   console.log(newV,oldV);
   //三秒后控制台会输出
   //'3秒后出现的某个值','test'
  }
 }
}
</script>

<!-- 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{
 ponents:{
  children
 },
 data(){
  return{
   parentMsg:'test'
  }
 },
 watch:{
  parentMsg(newV,oldV){
   console.log(newV,oldV);
   //三秒后控制台会输出
   //'3秒后出现的某个值','test'
  }
 }
}
</script>

<template>
 <children :msg.sync="parentMsg"></children>
 <!-- 等价于 -->
 <children :msg="parentMsg" @updata:msg="parentMsg = $event"></children>
 <!-- 这里的$event就是子组件$emit传递的参数 -->
</template>

<template>
 <children :.sync="obj"></children>
</template>
<script>
export default{
 ponents:{
  children
 },
 data(){
  return{
   obj:{
    parentMsg:'test'
   }
  }
 }
}
</script>