vue 组件中的 model: 允许自定义组件在使用 v-model 时定制 prop 和 event
<my-checkbox v-model="foo" value="some value"></my-checkbox>Vue.component('my-checkbox', {model: {prop: 'checked',event: 'change'},})Vue.component('my-checkbox', {model: {prop: 'checked',e
·
<my-checkbox v-model="foo" value="some value"></my-checkbox>
Vue.component('my-checkbox', {
model: {
prop: 'checked',
event: 'change'
},
})
Vue.component('my-checkbox', {
model: {
prop: 'checked',
event: 'change'
},
props: {
// this allows using the `value` prop for a different purpose
value: String,
// use `checked` as the prop which take the place of `value`
checked: {
type: Number,
default: 0
}
},
// ...
})
<my-checkbox v-model="foo" value="some value"></my-checkbox>
以上代码等价于:
<my-checkbox
:checked="foo"
@change="val => { foo = val }"
value="some value">
</my-checkbox>
不简写
<my-checkbox
v-bind:checked="foo"
v-on:change="function(val) {return foo = val }"
value="some value">
</my-checkbox>
例子解析:
<my-checkbox v-model="foo" value="some value"></my-checkbox>
model: {
prop: 'checked',
event: 'change'
},
同时使用 v-model="foo" 和 model: { prop: 'checked', event: 'change' }, 获得相关联后,相当于
<my-checkbox
v-bind:checked="foo" (因为 v-model 会默认绑定 checkbox 的 value 或 checked 值);
v-on:change="function(val) { return foo = val } (因为v-model 绑定的是value/checked 值。v-model="foo", 相当于 v-on 把 model 里的 change 事件和 value/checked="foo" 这个函数绑定在一起了 )>
</my-checkbox>
总结:
自定义元素上使用 v-model="theFunction", 同时,组件里使用 model {prop:xxx, event:xxx}
可以把 model 里面定义的 prop 和event 自动绑定在 "theFuntion" 这个自定义事件上
更多推荐
已为社区贡献4条内容
所有评论(0)