vue .sync 修饰符——当一个子组件改变了一个 prop 的值时，将这个变化同步到父组件中所绑定

从2.3.0起，Vue重新引入了 .sync修饰符，但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器。

示例一：
父组件：

<parent :items.sync="data1"></parent>
等同
<parent :items="data1" @update:items="val => data1 = val"></parent>
1
2
3

子组件：

 watch: {
      items(val) {
        this.tableData = val
      },
      tableData(val) {
        this.$emit('update:items', val)
      }
    },
    computed: {
    },
    data() {
      return {
        tableData: []
      }
   }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

示例二：
父组件：

 <div class="reg-form__field">
      <v-input
        placeholder="请输入手机号码"
        type="tel"
        maxlength="11"
        v-model="form.phone"
        :checkPhone="true"
        :required="true"
        novalidate="novalidate"
        pattern="[0-9]*"
        :valid.sync="form.valid_phone"
      />
    </div>
1
2
3
4
5
6
7
8
9
10
11
12
13

data() {
      return {
        form: {
          valid_phone: false // 是否有字段不正确
        }
      };
    }
1
2
3
4
5
6
7

子组件：
触发事件，传递更新的值

 this.$emit('update:valid', false);
1

如下：

会被扩展为：

<com :foo=“bar” @update:foo=“val => bar = val”>

当子组件需要更新foo的值时，它需要显示地触发一个更新事件：

this.$emit(“update:foo”, newValue)

Vue修饰符sync的功能是：当一个子组件改变了一个prop值时，这个变化也会同步到父组件中所绑定。如果我们不用 .sync，我们也可以用props传初始值，然后事件监听。

出处：https://blog.csdn.net/hnnd123/article/details/92655650