Vue 3 双向数据绑定 (v-model) 实现详解

在 Vue 3 中，双向数据绑定通过 'v-model' 指令来实现。

在 Vue 2 中，'v-model' 指令可以实现表单元素的双向数据绑定，但对于自定义组件，需要通过自定义事件来实现双向数据绑定。而在 Vue 3 中，'v-model' 指令可以直接用于自定义组件，实现自定义组件的双向数据绑定。

具体实现步骤如下：

在自定义组件中，使用 props 接收父组件传递的 'value' 属性，并使用 emits 定义一个名为 'update:modelValue' 的事件。

// 子组件
<template>
  <input :value='modelValue' @input='$emit('update:modelValue', $event.target.value)' />
</template>

<script>
export default {
  props: {
    modelValue: {
      type: String,
      required: true
    }
  },
  emits: ['update:modelValue']
}
</script>

在父组件中，通过 'v-model' 指令将子组件的 'modelValue' 属性与父组件的数据进行双向绑定。

// 父组件
<template>
  <ChildComponent v-model='data' />
</template>

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

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

这样，当子组件中的 input 元素的值发生变化时，会触发子组件的 'update:modelValue' 事件，父组件会接收到这个事件并更新 'data' 属性的值，反之亦然。

需要注意的是，在 Vue 3 中，'v-model' 指令默认绑定的属性名为 'modelValue'，而不再是 Vue 2 中的 'value'。如果想要绑定其他属性名，可以使用修饰符的方式来指定，例如 'v-model:title' 将绑定子组件的 'title' 属性。