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

//这里模拟异步将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>

此处需要注意，虽然加上 .sync 即可双向绑定，但是还是要依靠子组件 $emit 去触发 update:prop名 实现修改父组件的变量值实现双向数据流，如果直接对prop的属性直接赋值，依然会出现报错。

事实上， .sync 修饰符是一个简写，它做了一件事情

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

当需要把一个对象中的属性全部通过 .sync 传入双向数据流时，可以再简便一下写法

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

当使用这种写法时，会将obj对象中的所有属性都通过独立的props传递给子组件，并监听对应的 update: ，此时在子组件中也要声明对应的props。

总结

以上所述是小编给大家介绍的Vue父子组件双向绑定传值的实现方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！