【Vue】使用.sync实现父子组件数据双向绑定

在 Vue.js 中，.sync 修饰符用于在子组件中更新父组件的数据，以便实现双向绑定。.sync 修饰符实际上是一个语法糖，用于简化父子组件之间的通信。

假设你有一个父组件 Parent 和一个子组件 Child，你想在子组件中修改一个父组件的变量，可以使用 .sync 修饰符。

以下是一个简单的例子：

<!-- Parent.vue -->
<template>
  <div>
    <p>Parent Component: {{ message }}</p>
    <Child :message.sync="message" />
  </div>
</template>

<script>
import Child from './Child.vue';

export default {
  components: {
    Child
  },
  data() {
    return {
      message: 'Hello from parent!'
    };
  }
};
</script>

<!-- Child.vue -->
<template>
  <div>
    <p>Child Component: {{ message }}</p>
    <button @click="updateMessage">Update Parent</button>
  </div>
</template>

<script>
export default {
  props: {
    message: String
  },
  methods: {
    updateMessage() {
      // 使用 this.$emit('update:message', newValue) 触发更新
      this.$emit('update:message', 'Hello from child!');
    }
  }
};
</script>

在上面的例子中，Parent 组件有一个名为 message 的变量，它通过属性传递给了 Child 组件，并且通过 .sync 修饰符创建了一个名为 update:message 的事件。在 Child 组件中，通过点击按钮触发 updateMessage 方法，使用 this.$emit('update:message', newValue) 来触发 update:message 事件，从而更新父组件的 message 变量。

需要注意的是，.sync 修饰符实际上是一种简写形式，它展开为一个包含 v-on 和 v-bind 的语法糖。在上述例子中，:message.sync="message" 实际上是 :message="message" @update:message="message = $event" 的缩写形式。