vue父子通讯是单向数据流,也就是子组件不能修改父组件的值,但是在很多情况下是需要这样做的,比如在做功能编辑的时候,子组件需要带入父组件的原始值,而且子组件也需要修改这个值,到最后的保存值中,部分代码
// 父组件
// 子组件
props: {
stepTwoConfig: String
},
computed: {
config: {
get() {
return this.stepTwoConfig
},
set(val) {
this.$emit('update:stepTwoConfig', val)
}
}
}
以上代码是正确的通信方式。
但是在使用的时候发现一些问题,如果父组件传入的值是简单数据类型(string、number)时必须要使用$emit去更新。
如果父组件传入的值是引用类型时则不需要,甚至父组件不用带sync也可以,如下两种方式都不会报错,而且能挣钱传值:
// 方式1:::
// 父组件
// 子组件
props: {
stepTwoConfig: Object
}
// 方式2:::
// 父组件
// 子组件
props: {
stepTwoConfig: Object
}
回答
这就是要正确使用的props传值的问题,规范做法是无论如何都不允许直接修改父组件传过来的值,无论是简单类型还是引用类型,引用类型虽然不报错,但是对于追溯数据是不友好的,建议还是通过emit将子组件修改的值再传递给父组件
这个就是值传递和引用传递的问题
.sync的作用就是在父级中给组件添加上v-on:update:xxx这么一个监听,相当于一个语法糖,所以当你要绑定的是一个简单数据类型的时候,就可以使用它,并且子组件需要用$emit来配合,而如果绑定的是一个引用类型就没必要了,因为子组件随意修改都会触发