android中怎么保存checkbox中的checked属性_Vue自定义组件中支持v-model数据绑定

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

数据双向绑定

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

Vue.component('base-checkbox', {  model: {    prop: 'checked',    event: 'change'  },  props: {    checked: Boolean  },  template: `      `})

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

自定义组件数据绑定

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

使用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码农