持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第7天，点击查看活动详情

前言

相信在我们日常的开发过程中，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，完成数据的更新。

这样就形成了完整的闭环。

Vue组件入门（七）v-model与自定义事件

前言

v-model