Vue 组件入门（八）v-model + 自定义参数

作者：Augus

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

在 vue2 中，一个组件上只能使用一个使用一个 v-model，但是在 vue3 中，做了很大的改动，它允许你给 v-mode 绑定参数，使用的传递的 prop 可以自定义。而这一绑定参数的改动，带给我一个好处，就是，可以在组件上使用多个 v-model。而具体怎么做呢？我们来看一看。

`v-model` 的参数

回想一下，我们在组件绑定 v-model 的时候，他会转换成什么？

他会使用 modelValue 作为默认 prop，使用 update:modelValue 作为对应的默认监听事件。

而我们想改变默认值的时候，就可以通过绑定参数来实现自定义。

<MyComponent v-model:name="name" />

复制代码

这样的话，他就会转换成 name 的 prop 以及 update:name 的事件。所以，在子组件中，我们只需要接受这个 prop，和派发对应的事件就可以了。

<!-- MyComponent.vue --><script setup>defineProps(['name'])defineEmits(['update:name'])</script>
<template>  <input    type="text"    :value="name"    @input="$emit('update:name', $event.target.value)"  /></template>

复制代码

这样，我们就实现了一个自定义的 v-model。

多个 v-model

想必学会了绑定自定义参数，对于多个 v-model 绑定你也有自己的思路。下面我们来看看是怎么实现的。

父组件中：

<Book  v-model:author ="author"  v-model:price="price"/>

复制代码

子组件中:

<script setup>defineProps({  author: String,  price: String})
defineEmits(['update:author', 'update:price'])</script>
<template>  <input    type="text"    :value="author"    @input="$emit('update:author', $event.target.value)"  />  <input    type="text"    :value="price"    @input="$emit('update:price', $event.target.value)"  /></template>

复制代码

这样我们就实现多个 v-model 的绑定，每一个自定义 v-model 绑定的参数都会生成对应的 prop，而这声明的 prop 也会通过监听的事件的触发进行相应的更新。

也就是说我们完成了 v-model 的双向绑定，完成数据的输入赋值更新。

发布于: 刚刚阅读数: 3

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

Augus

关注

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

某摸鱼集团

发布

暂无评论

创作场景

Vue 组件入门（八）v-model + 自定义参数

v-model 的参数

多个 v-model

Augus

评论

`v-model` 的参数