Vue父子组件数据双向绑定,子组件可修改props

时间:2023-02-14 19:24:47

第一种,子组件通过监听父组件数据,子组件改变数据之后通知给父组件

原文链接:https://blog.csdn.net/m0_37728716/article/details/81776929

父组件 => props[parent-data] => 子组件 => watch[parent-data] => children-data = parent-data // 子组件监听父组件的改变

子组件 => $emit[children-data] => 父组件 => parant-data = children-data // 子组件通知父组件自身的改变

// 父组件
<template>
<div>
<Children :parentData="parentData" @getChildrenStatus="getChildrenStatus"></Children>
</div>
</template>
<script>
export default {
data(){
return {
parentData: 1
}
},
methods: {
getChildrenStatus: function(data){ // 实时更新子组件的变化
this.parentData = data
}
}
}
</script>
//子组件
<script>
export default {
data(){
return {
chiildrenData: 1
}
},
props: ['parentData'],
watch: {
parentData: function(){ // 监听父组件的变化
this.childrenData = this.parentData
}
},
mounted(){
this.$emit('getChildrenStatus', this.childrenData) // 将改变通知父组件(保证父子组件数据一致)
}
}
</script>

第二种 .sync 修饰符

在vue的组件通信props中,一般情况下,数据都是单向的,子组件不会更改父组件的值

那么vue提供.sync作为双向传递的关键字,实现了父组件的变动会传递给子组件,而子组件的foo改变时,通过事件机制,修改父组件的foo。完成了子组件newFoo和父组件foo的双向映射。

// 父组件
<Son :foo.sync="foo"></Son>
//子组件
props: ['foo'],
data: function () {
return {
newFoo: this.foo;
}
},
methods:{
add:function(){
this.newMsg=10;
this.$emit('update:foo',this.newFoo);
}
}

在一些情况下,可能会对一个props进行'双向绑定',事实上 , '.sync'修饰符提供了此功能

  • 当一个子组件改变了一个props 的值时,这个变化也会同步到父组件中所绑定的值
  • 也会导致问题,因为破坏了‘单项数据流’的假设,由于子组件改变props的代码和普通代码改懂毫无区别,当光看子组件代码时,完全不知何时改变了父组件的状态
  • 会被重新引入,扩展为一个自动更新父组件属性的v-on侦听器
  • v-model毕竟不是给组件与组件之间通信而设计的双向绑定,无论从语意上和代码写法上都没有,'.sync'直观和方便
  • 无论从v-model还是'.sync'修饰符来看,都离不开$emit 和 v-on 语法糖的封装,主要目的还是为了保证数据的正确单向流动与显示流动
<Son :foo.sync="sth"></Son>   //.sync修饰符
<Son :foo="sth" @update:foo="value=>sth=value"></Son>
  • :foo则是Son 子组件需要从父组件props接受的数据
  • 通过事件显示监听update:foo(foo则是props显示监听的数据),通过箭头函数执行回调,把函数传给sth,则就形成一种双向绑定循环链条
  • 当子组件需要更新foo的值时,需显示地触发更新事件
this.$emit('update:foo',newValue)

同时父组件@update:foo 也是依赖子组件的显示触发,这样可以轻松的捕捉到了数据的正常流动

  • 第一个参数则是 update 则是显示更新的事件,跟在后面的 :foo 则是需要改变对应的props值
  • 第二个参数传入的是希望父组件foo数据里将要变化的值,以及用于父组件接受update时更新数据

warn: 子组件改变父组件的数据时,update冒号后面的参数和父组件传递进来的值是同步的,想改变哪个,则冒号后面的值对应的就是哪个,两者相互对应,必填