.sync修饰符的作用

.sync修饰符的作用

为了实现一个子组件修改多个父组件的数据， 子组件中有两个以上input需要修改两个以上父组件的数据 不使用sync修饰符会变得非常冗长，如下

举例：

//父组件
<h1>NAME:{{ name }}</h1>
<h1>AGE:{{ age }}</h1>

//以下两种写法完全等价
<!-- <my-input v-model="age" :nameToSon="name" @update:nameToSon='name=$event'></my-input> -->
<my-input v-model="age" :nameToSon.sync='name'/> 

data() {
    return {
      age: 10,
      name:'lhl'
    };
  },
  
  components: {
    MyInput,
  },

//子组件

my-input1
<input type="text" placeholder="姓名" v-model="selfName" />
my-input2
<input type="text" placeholder="年龄" v-model="selfValue" />

props: ["value", "nameToSon"],
computed: {
    selfName: {
      get() {
        console.log('get_this.nameToSon',this.nameToSon);
        return this.nameToSon;
      },
      set(v) {
        console.log('selfName的V',v);
        this.$emit("update:nameToSon", v);
      },
    },
    
    
    selfValue: {
      get() {
        return this.value;
      },
      set(v) {
        console.log('selfValue的V',v);
        this.$emit("input", v);
      },
    },
}