vue3的v-model

03
六月
2021

摘要

vue3.0中对如何在自定义组件上使用v-model进行了重大升级,本文详情列出了变化要点,并给出了示例代码。
内容

  1. 历史回顾。v-model的前世今生

  2. 具体的变化内容

组件上单个v-model

组件上单个v-model别名

组件上多个v-model

组件上v-model自定义修饰符

  1. 小结

历史回顾

Vue 2.0

v-model 只能绑定在组件的 value 属性上。

也就是说在son-com这个的组件的内部,你只能通过一个名为value的属性来获取父组件中传入的msg的值。

{
props:[‘value’]
}
这一点其实不太友好:value这个词太没有语义了。所以在后续版本中增加可修改属性名的功能。

vue 2.2

在此版本中,组件在定义可以写 model 项,开发者通过这个设置和 v-model 关联的属性和事件。

具体做法是在组件内部定义一个model项,其中prop用来设置v-model中默认的value的别名, event用来设置v-model中默认的input事件的别名

Vue.component(‘SonCom’,{
template: <div>{{checked}} <button @click="$emit('change', false)">设成false</div>
model: {
prop: ‘checked’, // 默认叫value
event: ‘change’ // 默认叫input
}
}
vue 2.x

一个组件上只能一个v-model。

当然,你也可以用v-bind.sync来达成多个数据项双向绑定的效果,代码如下:

父组件

{{a}} - {{b}}

v-bind的.sync修饰符和组件的model选项被删除了,因为你不再需要它们了,具体说明见后文。

变化内容

先把明细列出来:
属性以及事件的默认名称变了

v-bind 的 .sync 修饰符和组件的 model 选项被移除了,取而代之的是 v-model 参数

支持同一组件同时设置多个 v-model

支持自定义 v-model 修饰符

在原生input 上的v-model

它的使用与2.X的版本是一样的,也可以使用修饰符。

父组件

{{a}}

请注意,属性名是 modelValue, 事件名是:update:modelValue

父组件

{{a}}
这种写法就与2.X中的.sync的写法比较一致了。 在组件上的v-model绑定别名

下面将传入子组件中的属性从固定的modelValue改个名字。

父组件

{{a}}

终于可以写多个v-model了

父组件

{{a}} - {{b}}
在组件上的v-model的自定义修饰符

不用羡慕trim啦,你可以自已添加修饰符。定义格式:

<子组件 v-model.修饰符1.修饰符2=“绑定值” />
原理

在子组件内部,通过定义一个名为 modelModifiers的属性来收集修饰符,它的结果的格式是:

{
修饰符1:true
修饰符2:true
}
然后在抛出事件之前,就根据这个修饰符来定义自已的逻辑了。

示例

父组件

{{a}} - {{b}}

如果是: son-comv-model:foo=“a”/

则对应的prop及修饰符的名字就会变成: props:[‘foo’,‘fooModifiers’]

小结

3.X中的v-model解决了2.X中的两个问题,并有一个新的创新点

原2.X中只能有一个v-mode,现在可以有多个
原2.X中要单独学习v-model和sync,理解成本较高,现在统一起来了。
创新点是:你可以自已添加修饰符了。

TAG

网友评论

共有访客发表了评论
请登录后再发布评论,和谐社会,请文明发言,谢谢合作! 立即登录 注册会员