Vue自定义组件中支持v-model数据绑定

通过使用v-model使得自定义组件可以支持双向绑定,可以使表单的组件更丰富,同时还可以使得数据的获取与修改更简单。

Vue自定义组件中支持v-model数据绑定

双向数据绑定是 Vue 的一个重要特性,主要用于表单页面中。在 Vue 内置了 v-model 指令用来实现数据的双向绑定。

数据双向绑定

在官方文档中,可以很方便的找到v-model的使用示例。

Vue.component('base-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean
  },
  template: `
    <input
      type="checkbox"
      v-bind:checked="checked"
      v-on:change="$emit('change', $event.target.checked)"
    >
  `
})

在 input 标签中直接使用 v-model 指令,就是实现message变量的双向绑定:message 内容的变化会直接显示到页面,input 中的内容变化会引起 message 内容的同步变化。

自定义组件数据绑定

在官网的示例中提供了一个自定义组件实现 v-model 的例子:

<base-checkbox v-model="lovingVue"></base-checkbox>

使用base-checkbox

<base-checkbox v-model="lovingVue"></base-checkbox>

分析

在这个例子中,可以发现在组件的定义过程中,多了个 model 属性的设置。model 中有两个字段:

  • prop
  • event

model 属性就是组件对 v-model 指令信息的描述。其中的 prop 表示 v-model 绑定的数据会具体绑定在哪个 props 上,这里绑定的是 checked,event 表示 v-model 监听的事件,此事件触发的消息内容会绑定包 v-model 上。

默认情况下,prop 的值是 value,event 的值是 input。

总结

通过使用v-model使得自定义组件可以支持双向绑定,可以使表单的组件更丰富,同时还可以使得数据的获取与修改更简单。


公众号: Java码农

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/57320.html

(0)
上一篇 2024-05-04 19:59
下一篇 2024-05-07 10:15

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关注微信