[ Vue3 ] 三种方式实现组件数据双向绑定

在Vue3中，实现组件数据的双向绑定主要有三种方式：v-model、.sync修饰符和自定义事件。以下是这三种方式的详细介绍：

1. v-model

Vue3中的v-model指令可以用于在表单元素上创建双向数据绑定。当表单元素的值发生变化时，绑定的数据也会自动更新。同样，当绑定的数据发生变化时，表单元素的值也会随之更新。

示例：

<template>
  <input v-model="message" placeholder="edit me">
  <p>Message is: {{ message }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  }
}
</script>

在这个示例中，v-model指令将输入框的值与message数据属性进行双向绑定。

2. .sync修饰符

.sync修饰符是Vue2中的一个特性，用于简化父子组件之间的双向数据绑定。在Vue3中，虽然.sync修饰符已被移除，但你可以通过自定义事件和props模拟实现类似的功能。

父组件：

<template>
  <ChildComponent :value.sync="parentValue" />
</template>

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

export default {
  components: { ChildComponent },
  data() {
    return { parentValue: 'initial value' };
  },
};
</script>

子组件：

<template>
  <button @click="updateValue">Update Value</button>
</template>

<script>
export default {
  props: ['value'],
  methods: {
    updateValue() {
      this.$emit('update:value', 'new value');
    },
  },
};
</script>

在这个示例中，子组件通过$emit触发一个名为update:value的事件，并将新值作为参数传递。父组件监听到这个事件后，会更新其parentValue数据属性的值。

3. 自定义事件

除了使用v-model和.sync修饰符外，你还可以通过自定义事件来实现组件数据的双向绑定。这种方法更加灵活，但需要手动处理数据的更新。

父组件：

<template>
  <ChildComponent :value="parentValue" @updateValue="parentValue = $event" />
</template>

<script>
// ...（与上一个示例相同）
</script>

子组件：

// ...（与上一个示例相同）

在这个示例中，子组件同样通过$emit触发一个自定义事件（如updateValue），父组件监听到这个事件后，手动更新其parentValue数据属性的值。这种方法与.sync修饰符的效果类似，但提供了更多的灵活性。