组件v-model（.sync）记录使用（vue3）

示例（演示地址）

以下是Vue3中使用v-model实现组件的双向数据绑定的示例代码：

• 首先，让我们来了解一下Vue3中v-model的用法。在Vue3中，v-model 指令可以用于自定义组件上，用于实现组件的双向数据绑定。与Vue2中的 .sync 不同，Vue3中的v-model需要在组件中手动实现双向绑定逻辑。

• 下面是一个简单的父组件示例，展示了如何在Vue3中使用 v-model 来实现组件的双向数据绑定：

<template>
  <div>
    <custom-input v-model="message"></custom-input>
    <p>Message: {{ message }}</p>
  </div>
</template>

<script>
import { ref } from 'vue';
import CustomInput from './CustomInput.vue';

export default {
  components: {
    CustomInput,
  },
  setup() {
    const message = ref('');

    return {
      message,
    };
  },
};
</script>

• 在上面的示例中，我们定义了一个父组件，并在其中使用了一个 自定义组件CustomInput。
  我们使用 v-model指令将父组件的 message属性绑定到CustomInput组件的modelValue属性上。
  这样，当CustomInput组件的modelValue属性发生变化时，父组件的message属性也会相应地更新。

• 接下来，我们需要在CustomInput组件中手动实现双向绑定逻辑。 下面是CustomInput组件的代码：

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

<script>
import { defineProps } from 'vue';

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

• 在上面的代码中，我们定义了一个自定义组件CustomInput，并在其中使用了一个input元素。我们使用:value属性将父组件传递过来的modelValue属性绑定到input元素的value属性上。这样，当父组件的message属性发生变化时，CustomInput组件的modelValue属性也会相应地更新。

• 同时，我们使用@input事件监听input元素的输入事件，并使用$emit方法触发一个名为update:modelValue的自定义事件，并将输入框的值作为参数传递给父组件。这样，当用户在输入框中输入内容时，父组件的message属性也会相应地更新。

• 最后，我们需要在父组件中引入CustomInput组件，并将其注册为局部组件。这样，我们就可以在父组件中使用v-model指令来实现组件的双向数据绑定了。

• Vue3.js官方文档 - 组件v-model（.sync）
• Vue3.js官方文档 - 组件v-model 演示地址