vue3自定义组件的v-model

在 Vue 3 中，自定义组件的 v-model 功能略有不同。Vue 3 引入了一个新的 API，即 `emits` 选项，用于声明组件所触发的事件。通过使用这个新的 API，我们可以实现自定义组件的 v-model 功能。

首先，在自定义组件中，你需要使用 `modelValue` prop 来接收父组件传递过来的值。同时，你还需要使用 `emit` 函数来触发一个名为 `update:modelValue` 的事件，并将新的值作为参数传递给它。这样就可以实现双向绑定的效果。

以下是一个示例代码：

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

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

在这个示例中，我们创建了一个简单的文本输入框组件。它接收一个 `modelValue` prop，并在文本输入框的值上绑定了 `modelValue`。当用户输入时，通过 `@input` 事件触发 `updateValue` 方法来更新组件内部的值，并使用 `$emit` 函数触发了一个名为 `update:modelValue` 的事件，将新的值传递给父组件。

在父组件中，你可以像使用普通的 v-model 一样，使用这个自定义组件，并将一个变量绑定到 `v-model` 上。这个变量会被传递给自定义组件的 `modelValue` prop，并且当值发生变化时，会自动更新该变量的值。

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

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

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

在这个示例中，我们创建了一个父组件，并使用 `<custom-input>` 组件。通过将 `v-model` 绑定到 `message` 变量上，实现了双向绑定的效果。当用户在自定义组件中输入内容时，父组件中的 `message` 变量会自动更新，并在 `<p>` 标签中显示出来。

希望以上的解答能够帮助到你！如果还有其他问题，请继续提问。