Vue3 组件 v-model 和 defineModel 使用

在Vue 3中，v-model是一个指令，它创建了一个双向绑定，用于绑定到组件上。defineModel是一个Composition API的新函数，它用于创建一个组件的v-model功能。

以下是一个简单的例子，展示如何在Vue 3组件中使用v-model和defineModel：

<template>
  <div>
    <CustomInput v-model="inputValue" />
    <p>输入的值是：{{ inputValue }}</p>
  </div>
</template>
 
<script>
import { defineComponent, ref } from 'vue';
import CustomInput from './CustomInput.vue';
 
export default defineComponent({
  components: {
    CustomInput
  },
  setup() {
    const inputValue = ref('');
 
    return { inputValue };
  }
});
</script>

在CustomInput.vue组件中，我们使用defineModel来定义v-model的行为：

<template>
  <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)">
</template>
 
<script>
import { defineComponent, defineModel } from 'vue';
 
export default defineComponent({
  name: 'CustomInput',
  model: defineModel({
    prop: 'modelValue',
    event: 'update:modelValue'
  })
});
</script>

在这个例子中，CustomInput组件使用defineModel来声明它接受一个名为modelValue的prop，并且当它的值发生变化时，它会发出一个名为update:modelValue的事件。在父组件中，我们可以使用v-model来简化对输入值的双向绑定和事件处理。