vue3自定义组件v-model

Vue 3 中的自定义组件可以使用 `v-model` 来实现双向数据绑定。

在 Vue 3 中，`v-model` 不再是一个语法糖，而是一个指令。要在自定义组件中使用 `v-model`，需要在组件中声明一个 `modelValue` 属性，并在需要更新该属性的地方使用 `$emit('update:modelValue', newValue)` 来触发父组件的更新。

这里是一个示例：

<template>
  <div>
    <input :value="modelValue" @input="updateValue($event.target.value)">
  </div>
</template>

<script>
export default {
  props: {
    modelValue: {
      type: String,
      required: true
    }
  },
  methods: {
    updateValue(value) {
      this.$emit('update:modelValue', value);
    }
  }
};
</script>

然后在父组件中使用该自定义组件时，可以使用 `v-model` 来进行双向绑定：

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

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

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

这样，当在自定义组件中输入内容时，父组件中的 `message` 数据会随之更新，并且父组件中对 `message` 的修改也会反映到自定义组件中。