在Vue 3中使用v-model来构建复杂的表单

新出了一个系列：Vue2与Vue3 技巧小册

微信搜索 【大迁世界】, 我会第一时间和你分享前端行业趋势，学习途径等等。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。

在本文中，我们会介绍Vue 3中 v-model 指令的变化。然后，再通过一个事例讲解下如何使用多个v-model绑定来简化Vue中复杂表单的构建过程。

什么是 v-model 指令

v-model 指令可以在表单输入元素上实现双向数据绑定，比如 input 元素、textarea 元素和 select 元素等等。

它以两种方式处理数据更新:

• 当输入的值发生变化时，v-model 会将该值反映到组件内部的状态

• 当组件的状态发生变化时，v-model 会将变化反映到表单输入元素上

默认情况下，v-model 指令使用不同的属性，并为不同的输入元素发出不同的事件:

• input 和 textarea 对应 value 属性和 input 事件
• checkboxes 和 radio 对应 checked 属性和 change 事件
• select 对应 value 属性和 change 事件

如果，我们自定义一个 v-model，大致实现如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

在父组件中，就可以这样使用了：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

在自定义组件中，v-model 指令假定已经定义了一个内部属性，名称为 modelValue，并发出了一个名为 update:modelValue 的事件。

我们也可以并不局限于默认的命名规则，自行选择我们要使用的名字。为我们的v-model绑定有描述性的名字。

只要确保在选择命名属性时保持一致就可以了。这里有一个自定义名称fullName的例子，用于modelValue属性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

在父组件中，就可以这样使用了：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

注意：这里不能用简写的形式了，因为 modelValue 是默认的，可以在使用时候直接使用 v-model，而我们自定义的 v-model 需要写上对应的修饰符名称 v-model:fullName。

v-model 是如何处理数据绑定的？

v-model指令有三个可用于数据绑定的修饰器：.lazy、.number 和 .trim。

.lazy

在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步。你可以添加 lazy 修饰符，从而转为在 change 事件之后进行同步：

1
2

.number

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

1

.trim

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

1

Vue3 中的 v-model 与 Vue2 有什么不同？

在 Vue 2.0 发布后，开发者使用 v-model 指令时必须使用名为 value 的 prop。如果开发者出于不同的目的需要使用其他的 prop，他们就不得不使用 v-bind.sync。此外，由于v-model 和 value 之间的这种硬编码关系的原因，产生了如何处理原生元素和自定义元素的问题。

在 Vue 2.2 中，我们引入了 model 组件选项，允许组件自定义用于 v-model 的 prop 和事件。但是，这仍然只允许在组件上使用一个 v-model。

在 Vue 3 中，双向数据绑定的 API 已经标准化，以减少开发者在使用 v-model 指令时的混淆，并且更加灵活。

多个 v-model 绑定

现在，我们来看看如何使用多个 v-model 指令绑定来简化复杂的Vue表单。

例子中，我们将使用一个结账表单，列出用户的名字、姓氏和电子邮件地址，然后是一些与账单和交付有关的字段。

创建可重用的组件

如上图所示 Billing 和 Delivery 都有 street name, street number, city, 和 postcode 字段。所以，我们可以创建一个可重复使用的地址组件

首先，用如下命令，创建一个新的项目：

vue create 
1

然后，在 src/components 目录下创建可重用 AddressFieldGroup.vue。这个可重用的组件将被导入 App.vue 文件中。

AddressFieldGroup.vue 内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

上面代码对四个字段：streetName、streetNumber、city 和 postcode，实现一个双向绑定，即：

:value="city"
@input="$emit('update:city', $event.target.value)"
1
2

这样，我们在外部就可以使用 v-model:字段名 来实时获取输入的值。

现在，将该组件导入 App.vue 中使用，如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121

在上面的代码中，我们创建了一个 CheckoutForm，它包含三个输入字段：firstName, lastName, 和 email。我们还在表单中嵌入了两次可重复使用的 AddressFieldGroup组件，用它来表示用户的 Billing Address 和 Delivery Address.。

我们使用v-model:{property-name}格式来绑定两个自定义 AddressFieldGroup 组件上的每个属性。

总结

在这篇文章中，我们探讨了 v-model 指令，确定了哪些Vue修饰器可以和它一起使用，并演示了如何在Vue组件上使用多个 v-model 绑定来简化复杂Vue表单的创建。

v-model让我们可以灵活地在一个组件实例上添加多个 v-model 指令，而且 modelValue 也可以根据我们的偏好进行重命名。

事例地址：https://codesandbox.io/s/v-model-multi-binding-bzp5gz

代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。

作者：romaopedro 译者：前端小智 来源：logrocket
原文：https://blog.logrocket.com/using-v-model-vue-3-build-complex-forms/

交流

有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6wWzBxt2-1660264038769)(/img/remote/1460000020353567?w=800&h=400)]