vue自定义组件的 v-model

时间:2021-6-7 作者:qvyue

在 2.x 中,在组件上使用 v-model 相当于绑定 value prop 和 input 事件
父组件

子组件

export default { props: { value: String, } }

如果要将属性或事件名称更改为其他名称,则需要在 ChildComponent 组件中添加 model 选项

// ChildComponent.vue

export default {
  model: {
    prop: 'title',
    event: 'change'
  },
  props: {
    // 这将允许 `value` 属性用于其他用途
    value: String,
    // 使用 `title` 代替 `value` 作为 model 的 prop
    title: {
      type: String,
      default: 'Default title'
    }
  }
}

所以,在这个例子中 v-model 的简写如下:

使用 v-bind.sync
在某些情况下,我们可能需要对某一个 prop 进行“双向绑定”(除了前面用 v-model 绑定 prop 的情况)。为此,我们建议使用 update:myPropName 抛出事件。例如,对于在上一个示例中带有 title prop 的 ChildComponent,我们可以通过下面的方式将分配新 value 的意图传达给父级:

this.$emit('update:title', newValue)

如果需要的话,父级可以监听该事件并更新本地 data property

3.x 语法

在 3.x 中,自定义组件上的 v-model 相当于传递了 modelValue prop 并接收抛出的 update:modelValue 事件:

// ChildComponent.vue
{{modelValue}} 点我
export default { props: { modelValue: String } };

v-model 参数
若需要更改 model 名称,而不是更改组件内的 model 选项,那么现在我们可以将一个 argument 传递给 model:

// ChildComponent.vue
{{title}} 点我
export default { props: { title: String } };

v-bind的.sync修饰符在 Vue 3 中被去掉了, 合并到了v-model里,
即可以作为 .sync 修饰符的替代,而且允许我们在自定义组件上使用多个 v-model。

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。