v-model 可以在组件上使用以实现双向绑定。
首先让我们回忆一下 v-model 在原生元素上的用法：
在代码背后，模板编译器会对 v-model 进行更冗长的等价展开。因此上面的代码其实等价于下面这段：
而当使用在一个组件上时，v-model 会被展开为如下的形式：
要让这个例子实际工作起来， 组件内部需要做两件事：
1.将内部原生 元素的 value attribute 绑定到 modelValue prop2.当原生的 input 事件触发时，触发一个携带了新值的 update:modelValue 自定义事
这里是相应的代码：
<script setup>defineProps(['modelValue'])defineEmits(['update:modelValue'])script><template> <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />template>
现在 v-model 可以在这个组件上正常工作了：
另一种在组件内实现 v-model 的方式是使用一个可写的，同时具有 getter 和 setter 的 computed 属性。get 方法需返回 modelValue prop，而 set 方法需触发相应的事件：
<script setup>import { computed } from 'vue'const props = defineProps(['modelValue'])const emit = defineEmits(['update:modelValue'])const value = computed({ get() { return props.modelValue }, set(value) { emit('update:modelValue', value) }})script><template> <input v-model="value" />template>
默认情况下，v-model 在组件上都是使用 modelValue 作为 prop，并以 update:modelValue 作为对应的事件。我们可以通过给 v-model 指定一个参数来更改这些名字：
在这个例子中，子组件应声明一个 title prop，并通过触发 update:title 事件更新父组件值：
<script setup>defineProps(['title'])defineEmits(['update:title'])script><template> <input type="text" :value="title" @input="$emit('update:title', $event.target.value)" />template>
我们可以在单个组件实例上创建多个 v-model 双向绑定。
