如何正确使用vue中的sync修饰符？

Question

vue父子通讯是单向数据流，也就是子组件不能修改父组件的值，但是在很多情况下是需要这样做的，比如在做功能编辑的时候，子组件需要带入父组件的原始值，而且子组件也需要修改这个值，到最后的保存值中，部分代码

// 父组件
<step-two-other v-bind:stepTwoConfig.sync="monitorConfigStr"></step-two-other>

// 子组件
<el-input v-model="config"></el-input>
props: {
    stepTwoConfig: String
},
computed: {
    config: {
        get() {
            return this.stepTwoConfig
        },
        set(val) {
            this.$emit('update:stepTwoConfig', val)
        }
    }
}

以上代码是正确的通信方式。

但是在使用的时候发现一些问题，如果父组件传入的值是简单数据类型（string、number）时必须要使用$emit去更新。
如果父组件传入的值是引用类型时则不需要，甚至父组件不用带sync也可以，如下两种方式都不会报错，而且能挣钱传值：

// 方式1：：：

// 父组件
<step-two-other v-bind:stepTwoConfig.sync="monitorConfigStr"></step-two-other>

// 子组件
<el-input v-model="stepTwoConfig.name"></el-input>
props: {
    stepTwoConfig: Object
}


// 方式2：：：

// 父组件
<step-two-other :stepTwoConfig="monitorConfigStr"></step-two-other>

// 子组件
<el-input v-model="stepTwoConfig.name"></el-input>
props: {
    stepTwoConfig: Object
}

Answer 1

这就是要正确使用的props传值的问题，规范做法是无论如何都不允许直接修改父组件传过来的值，无论是简单类型还是引用类型，引用类型虽然不报错，但是对于追溯数据是不友好的，建议还是通过emit将子组件修改的值再传递给父组件

Answer 2

这个就是值传递和引用传递的问题

Answer 3

.sync的作用就是在父级中给组件添加上v-on:update:xxx这么一个监听，相当于一个语法糖，所以当你要绑定的是一个简单数据类型的时候，就可以使用它，并且子组件需要用$emit来配合，而如果绑定的是一个引用类型就没必要了，因为子组件随意修改都会触发