0
点赞
收藏
分享

微信扫一扫

vue自定义组件上的v-model


2.2.0+ 新增

一个组件上的 ​​v-model​​​ 默认会利用名为​​ value​​​ 的 ​​prop​​​ 和名为 ​​input​​​ 的事件,但是像单选框、复选框等类型的输入控件可能会将 ​​value attribute​​​ 用于不同的目的。​​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)"
>
`
})

现在在这个组件上使用 v-model 的时候:

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

这里的 ​​lovingVue​​​ 的值将会传入这个名为 ​​checked​​​ 的 ​​prop​​​。同时当 ​​<base-checkbox>​​​ 触发一个 ​​change​​​ 事件并附带一个新的值的时候,这个​​ lovingVue​​​ 的 ​​property​​ 将会被更新。

注意:你仍然需要在组件的 ​​props​​​ 选项里声明 ​​checked​​​ 这个 ​​prop​​。


举报

相关推荐

0 条评论