Vue组件入门(七)v-model与自定义事件

50 阅读1分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 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,完成数据的更新。

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