type
status
date
slug
summary
tags
category
icon
password
v-model
在组件上可以实现双向绑定首先让我们回忆一下
v-model在
原生元素上的用法:在上面代码的背后,模板编译器会对
v-model
进行更冗长的等价展开。因此上面代码其实等价与下面这段代码:而当我们将
v-model
使用在一个组件上时,v-model
会被展开为如下形式<A> 组件内部需要做两件事:
- 将内部原生 <input> 元素的
value
attribute 绑定到modelValue
prop
- 当原生的 input 事件触发时,触发一个携带了新值的
update:modelValue
自定义事件
v-model基础绑定:
- 父组件:
引入弹窗子组件
A.vue
,并在A
组件上绑定一个v-model
,并将isShow的值传给它- 子组件A.vue:
通过
defineProps
接收父组件传过来的v-model的值默认情况下,
v-model
在组件上都是使用modelValue
作为属性 ,接收的值也就是父组件里isShow
的值配合
defineEmits
,触发close
关闭弹窗事件,并将父组件里isShow
的值修改为false
默认情况下,
v-model
在组件里都是使用update:modelValue
作为对应的事件多个v-model绑定
我们可以给
v-model
指定参数来更改名字,从而可以在一个组件上创建多个v-model
双向绑定。组件上的每一个
v-model
都会同步不同的prop
- 父组件:
- 子组件:注意 prop 从原来默认的 modelValue 变为了传入的参数名,对应的事件也变成了 update:参数名
自定义修饰符
在学习输入绑定时,我们知道了
v-model
有一些内置修饰符,例如 .trim
,.number
和 .lazy
。在某些场景下,可能想要一个自定义组件的 v-model
支持自定义的修饰符- 我们来创建一个自定义的修饰符 capitalize
- A组件的
v-model
上所添加的修饰符,可以通过modelModifiers
prop 在组件内访问到。在下面的组件中,我们声明了modelModifiers
这个 prop,它的默认值是一个空对象:
打印一下组件的
modelModifiers
prop 包含了 capitalize
, 且其值为 true
,就表示它在模板中的 v-model
绑定 v-model.capitalize="myText"
上被使用了。我们可以用判断
props.modelModifiers.capitalize
的值,来进行一些其他操作案例代码演示
父组件:
子组件:
- 作者:衔蝉
- 链接:https://xianchan.ah.cn/article/vue3-22
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。
相关文章