自定义组件中的v-model如何使用
时间: 2023-11-19 15:55:19 浏览: 45
自定义组件中的v-model可以通过设置model选项来实现。默认情况下,一个组件上的v-model会把value用作prop且把input用作event,但是一些输入类型比如单选框和复选框按钮可能想使用value prop 来达到不同的目的。使用model选项可以回避这些情况产生的冲突。具体来说,需要在组件选项中设置model选项,该选项是一个对象,包含prop和event两个属性,分别用于指定组件的prop和event名称。例如,如果我们想在一个自定义组件中使用v-model指令,并将value属性绑定到名为checked的prop上,将input事件绑定到名为change的event上,可以这样设置model选项:
```
Vue.component('my-checkbox', {
model: {
prop: 'checked',
event: 'change'
},
props: {
checked: Boolean
},
template: `
<input type="checkbox"
:checked="checked"
@change="$emit('change', $event.target.checked)">
`
})
```
在上面的例子中,我们定义了一个名为my-checkbox的自定义组件,并设置了model选项,prop属性为checked,event属性为change。在组件的模板中,我们使用:checked绑定了checked prop,使用@change监听了change event,并在事件处理函数中使用$emit方法触发了change事件,并传递了当前checkbox的checked状态作为参数。这样,我们就可以在父组件中使用v-model指令来双向绑定my-checkbox组件的checked prop了。例如:
```
<my-checkbox v-model="isChecked"></my-checkbox>
```
在上面的例子中,我们使用v-model指令将isChecked变量与my-checkbox组件的checked prop双向绑定,这样当isChecked变量发生变化时,my-checkbox组件的checked prop也会跟着变化,反之亦然。