前言
相信在我们日常的开发过程中，v-model这个指令的使用次数是很频繁的。他很方便的帮助我们省略了在input标签上书写的数据同步相关的代码，让我们更加关注于业务的实现。那你知道他这个指令帮助我们做了什么吗？以及他和自定义事件有什么关系呢？下面，我们来一点点的看看他的真相。
v-model
之前我们提到过，在input标签上书写v-model指令：
<input v-model="searchText" /> 复制代码
他编译后，直接转换为如下代码：
<input :value="searchText" @input="searchText = $event.target.value" /> 复制代码
但是，如果你是使用在组件上面的话，编译转换后的代码就不一样了:
<CustomCom :modelValue="title" @update:modelValue="val => title = val" /> 复制代码
看到如上代码，我想你应该明白点什么了，如果想让他正常工作。你得干两件事：
- 声明modelVal的props
- 派发 update:modelValue 事件。
所以：
<!-- CustomCom.vue --> <script setup> defineProps(['modelValue']) defineEmits(['update:modelValue']) </script> <template> <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" /> </template> 复制代码
这样，我们就完成了在组件上实现v-model功能了。
<CustomCom v-model="title" /> 复制代码
不过，对于v-model还有另一种实现方式，就是通过 computed的 getter 和 setter属性来完成事件的派发。也就是通过set方法触发相应的事件。
<!-- CustomCom.vue --> <script setup> import { computed } from 'vue' const props = defineProps(['modelValue']) const emit = defineEmits(['update:modelValue']) const value = computed({ get() { return props.modelValue }, set(title) { emit('update:modelValue', title) } }) </script> <template> <input v-model="title" /> </template> 复制代码
通过 input 标签上的v-model 我们就很容易的触发，title这个计算属性的 set 方法，从而触发父组件进行数据更新。
然后通过 get方法实时获取父组件更新的数据的prop，完成数据的更新。
这样就形成了完整的闭环。
