如何自定义组件的v-model
如果说要MyInput.vue组件，和父组件App.vue中的name联动1、MyInput.vue
<template>
<div>
<input type="textarea" :value='value' @input='(e)=>$emit("input",e.target.value)'>
</div>
</template>
<script>
export default {
props: ['value']
}
</script>2、App.vue
<MyInput :value="name" @input='name=$event' />此处，可以使用v-model='name'替换 :value='name' @input='name=$event'，即：
<MyInput v-model="name" />那如果要定义一个MyCheckbox组件呢？
1、MyCheckbox.vue
<template>
<div>
<input type="checkbox" :checked='checked' @change='(e)=>$emit("change",e.target.checked)'>选项
</div>
</template>
<script>
export default {
props: ['checked']
}
</script>2、App.vue
<MyCheckbox :checked='checked' @change="checked=$event" />如果此处要想使用v-model去替换:checked='checked' @change="checked=$event"，即：
<MyCheckbox v-model="checked" />那么此时是无效的，因为v-model的默认属性是value，默认的事件是input，需要在子组件内去自定义v-model的属性名和事件名
3、MyCheckbox.vue
model: {
prop: 'checked',
event: 'change'
}此时，<MyCheckbox v-model="checked" />上的v-mode绑定的属性为checked，事件为change
文档来源：51CTO技术博客https://blog.51cto.com/u_15301829/3068369
页:
[1]