Vue定义组件的 v-model的两种方式
程序员文章站
2022-03-02 10:00:42
...
这些都是很基础,但又容易忽略的小知识点。
一、正常的注册方法
一个组件上的 v-model
默认会利用名为 value
的 prop 和名为 input
的事件。
Vue.component('base-checkbox', {
props: {
checked: Boolean
},
template: `
<input
v-bind:value="checked"
v-on:input="$emit('input', $event.target.value)"
>
`
})
二、特殊情况下
像单选框、复选框等类型的输入控件可能会将 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)"
>
`
})
注意你仍然需要在组件的 props
选项里声明 checked
这个 prop。