# v-model
在vue3中,在同一个组件上可使用v-model (opens new window)不同的形式进行双向绑定,有的组件库使用默认属性v-model
(也就是v-model:modelValue
)进行绑定,有的使用v-model:value
进行绑定,等等,比如:
# element-plus组件库 (opens new window)写法
<el-input v-model="value" placeholder="请输入内容"></el-input>
<el-checkbox v-model="checked">Checkbox</el-checkbox>
# ant组件库 (opens new window)写法
<a-input v-model:value="value" placeholder="请输入内容" />
<a-checkbox v-model:checked="checked">Checkbox</a-checkbox>
v-model若默认写法,则无需配置
大多数情况下,我们编写组件都会采用默认写法,即直接使用v-model
(如上面element-plus写法),则不需要对model的配置
若vue3组件v-model
采用带参的形式(如v-model:value
、v-model:checked
)进行双向绑定,则需要指定参数的值。
vue3-easy-form
有两种形式对v-model
进行配置(以ant组件库写法为例)
- 表单注册时全局配置(
推荐
)
Vue.use(esForm,
{
colon: false, // 是否有冒号
// ... 其它配置
models: { // 组件名:绑定的属性名
"a-input": "value",
"a-checkbox": "checked"
}
});
- 引用组件直接在局部配置
// 1. 引用`a-input`时:
`attrName`: {
name: "a-input", // 组件名
model: "value", // 双向绑定的属性名;若全局配置了,则此无需再配置,会从全局中查找
value: ""
}
// 2. 引用`a-checkbox`时:
`attrName`: {
name: "a-checkbox", // 组件名
model: "checked", // 双向绑定的属性名;若全局配置了,则此无需再配置,会从全局中查找
value: true
}