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

作者：Augus

2022-10-17
黑龙江
本文字数：850 字
阅读完需：约 1 分钟

前言

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

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

发布于: 刚刚阅读数: 5

原文链接:【http://xie.infoq.cn/article/5376e3d9d85a23021ae81da08】。文章转载请联系作者。

Augus

关注

爱瞎搞的软件开发工程师 2021-06-10 加入

某摸鱼集团

发布

暂无评论

创作场景

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

前言

v-model

Augus

评论