# 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:valuev-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
}