在 Vue 3 中，v-model 可以非常方便地用于自定义组件，创建双向数据绑定。这不仅使得组件更易于使用，也使得代码更加清晰和简洁。下面我们将通过创建一个简单的自定义组件来演示 v-model 的用法。

自定义组件的创建和使用

假设我们需要一个自定义的数字输入组件，我们将其命名为 CustomNumberInput.vue。这个组件将接收一个 modelValue 作为其值，并在值改变时发出一个事件来更新这个值。

1. 创建 CustomNumberInput.vue

首先，让我们定义组件的结构和行为：

<template>
  <input type="number" :value="modelValue" @input="onInput">
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

// 定义接收的 prop
let props = defineProps({
  modelValue: Number,
});

// 定义可以触发的事件
let emits = defineEmits(['update:modelValue']);

// 处理 input 事件并发出更新
function onInput(event) {
  // 向父组件发出更新 modelValue 的事件
  emits('update:modelValue', Number(event.target.value));
}
</script>

在这个组件中，我们定义了一个 input 元素，它的值绑定到 modelValue 上。当用户输入时，onInput 方法会被触发，它将新的值通过 update:modelValue 事件发送给父组件。

2. 在父组件中使用 CustomNumberInput.vue

接下来，在父组件中使用这个自定义的输入组件，并通过 v-model 进行双向数据绑定。

<template>
  <div>
    <h1>Custom Number Input Example</h1>
    <CustomNumberInput v-model="numberValue" />
    <p>Value: {{ numberValue }}</p>
  </div>
</template>

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

// 定义一个响应式数据
const numberValue = ref(10);
</script>

在这个父组件中，我们引入了 CustomNumberInput 组件，并通过 v-model 将 numberValue 与子组件的 modelValue 双向绑定。这样，无论是在输入框中改变值，还是在父组件中修改 numberValue 的值，两者都会同步更新。

效果看下图中最后两行：

总结

通过这个例子，你可以看到 v-model 在自定义组件中的用法非常直观和强大。它简化了父子组件间的数据传递和事件处理，使得组件的使用变得非常灵活和方便。这种方法非常适用于需要实现表单控件或任何需要双向数据绑定的自定义组件。

看看其他：Vue3 组件通信示例：使用 provide 和 inject