在vue中除了input以及其他可以直接绑定v-model的标签之外，也为自定义的标签创建了v-model的指令，方便我们在组件封装的过程中进行取值操作。下面我们可以通过一个简单的案例进行了解一下。
自定义组件TestModel内部
<template>
<!-- 自定义组件中使用v-mode指令 -->
<input type="search" @input="inputEvent" data-myValue="">
</template>
<script>
export default {
name: 'TestModel',
// 当我们使用model的默认值的时候value作prop，input作event时，可以省略不写model。
model: {
prop: 'myValue', // 默认是value
event: 'myInput', // 默认是input
},
props: {
// 接收string和number类型的值，
// 注意不能是写成字符串["String","Number"],因为此时它们是构造器，是全局变量
myValue: [String, Number],
},
methods: {
inputEvent ($event) {
// 向上派发myInput事件，这样model监听myInput才有意义：当输入字符时触发input事件，
// 进而派发触发自定义的myInput事件，然后model监听myInput，就实现了数据绑定
this.$emit('myInput', $event.target.value)
},
}
}
</script>
父组件中使用
<template>
<div class="home">
<h3>输入的实时内容：{{ myValue }}</h3>
<test-model v-model="myValue"></test-model>
</div>
</template>
<script>
import TestModel from './TestModel'
export default {
name: 'Home',
components: {
TestModel,
},
data () {
return {
myValue: ''
}
},
}
</script>
基于以上的简单案例，我们可以对一些复杂的组件进行绑定一些值得的操作
以上属于Vue2.0自定义组件的v-model绑定
在Vue3，查看文档
<!-- CustomInput.vue -->
<script>
export default {
props: ['modelValue'],
emits: ['update:modelValue'],
computed: {
value: {
get() {
return this.modelValue
},
set(value) {
this.$emit('update:modelValue', value)
}
}
}
}
</script>
<template>
<input v-model="value" />
</template>
已经没有了Vue2.0 定义model的部分，所以需要进行注意，在使用ant-design-vue 中对应的双向数据绑定也更换成了组件的V-model:value形式
可以支持单个组件绑定多个不同的属性，对应进行配置不同的更新方法名
<!-- V-model:modelValue V-model:xxx V-model:xxxx ...-->
emits: ['update:modelValue','update:xxx','update:xxxx',...],
