当v-model与组件绑定时，可以展开为如下形式：
<CustomInput
:modelValue="searchText"
@update:modelValue="newValue => searchText = newValue"
/>要让这个例子实际工作起来，<CustomInput> 组件内部需要做两件事：
将内部原生 <input> 元素的 value attribute 绑定到 modelValue prop
当原生的 input 事件触发时，触发一个携带了新值的 update:modelValue 自定义事件
结合之前的示例，可以这样编写一个示例代码
App.vue
在根组件上，引入ConA组件使用v-model绑定变量myvalue。
添加两个按钮，一个提交功能简化为在控制台输出myvalue值，一个重置功能为清空myvalue值。
<template>
<div>
{{ myvalue }}
<ConA lable="输入" v-model="myvalue" />
<button @click="handelSub">提交</button>
<button @click="handleReset">重置</button>
</div>
</template>
<script>
import ConA from './ConA.vue'
export default {
components: {
ConA
},
data() {
return { myvalue: "" }
},
methods: {
handelSub() {
console.log('sub')
console.log(this.myvalue)
},
handleReset() {
console.log('reset')
this.myvalue = ''
}
}
}
</script>ConA.vue
由于在根组件中使用的v-model对ConA组件进行了绑定，所以props默认要包含modelValue，并且响应update:modelValue事件
在其中存在一个input，modelValue与其value绑定，input事件响应update:modelValue
<template>
<div>
{{ lable }}<input :value="modelValue" @input="handleInput">
</div>
</template>
<script>
export default {
props: ['modelValue','lable'],
methods:{
handleInput(event){
this.$emit('update:modelValue', event.target.value)}
}
}
</script>
