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