vue3自定义v-model

在Vue 3中，自定义v-model可以通过使用`v-model`指令和`emits`选项来实现。

首先，让我们创建一个可复用的自定义组件，例如一个自定义输入框组件。在这个组件中，我们将使用`value`属性来接受父组件传递的值，并且当值发生变化时，通过`$emit`方法触发一个名为`update:modelValue`的事件来通知父组件更新。

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

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

现在，我们可以在父组件中使用这个自定义组件，并使用`v-model`指令进行双向绑定。

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

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

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

在上述示例中，我们使用`v-model="message"`来绑定`message`属性到`CustomInput`组件的`value`属性，并自动监听输入事件和更新`message`的值。

需要注意的是，在Vue 3中，为了避免与原生的`input`事件冲突，`v-model`指令实际上会传递一个名为`modelValue`的属性和一个名为`update:modelValue`的事件来实现双向绑定。因此，我们在自定义组件中使用的是`modelValue`而不是`value`。

希望这个例子能帮助你理解如何在Vue 3中实现自定义v-model。