理解.sync 的用法

Vue 中规定：

• 组件不能修改 props 外部数据
• $emit可以触发发事件，并传参
• $event可以获取$emit 的参数

案例

<template>
  <div id="app">
    {{ data }}
    <Child :data.sync="data" />
    <Child :data="data" @update:data="data = $event" />
  </div>
</template>

<script>
<template>
  <div id="app">
    {{ data }}
    <Child :data.sync="data" />
    <!-- <Child :data="data" @update:data="data = $event" /> -->
  </div>
</template>

<script>
import Child from "./components/Child.vue";
export default {
  name: "App",
  components: {
    Child,//注册子组件
  },
  data() {
    return {
      data: 2,
    };
  },
};
</script>

Child 组件中不能直接修改从 props 接收外部数据 data，先把 data 存在 Child 组件数据n中，当 Child 组件需要修改 data 时，必须利用$emit触发父组件自身update:data方法修改data，$emit 在触发事件时将更新的 n 作为参数传回，在父组件中利用$event 接收该参数更新到 data，从而同时完成子组件父组件 data 的更新
Child.vue

<template>
  <div>
    {{ n }}
    <button @click="updateData">更新从父组件传过来n</button>
  </div>
</template>
<script>
export default {
  // 子组件要使用父组件的数据，只需要一步，在 props中接收父组件的属性
  props: ["data"], // 接收父组件给子组件定义的属性 用props
  data() {
    return {
      n: this.data,
    };
  },
  methods: {
    updateData: function () {
      this.$emit("update:data", ++this.n); //通知父组件更新值
    },
  },
};
</script>

Vue 为了方便起见，将<Child :data="data" @update:data="data = $event" />提供一个缩写，即 .sync 修饰符,<Child :data.sync="data" />

.sync 修饰符

注意带有 .sync 修饰符的 v-bind 不能和表达式一起使用 (例如 :data.sync=”data++”会报错，只能传变量名称不能传表达式，v-model 也是)。