默认情况下，组件上的v-model使用modelValue作为prop和update:modelValue作为子组件更新父组件值的事件。我们可以通过向v-model传递参数来修改这些名称：
父组件：
<template>
<!--这里的v-model必须要，否则的话，只能将keyword传给子组件，却无法实现双向绑定-->
<zdyinput v-model:keyword="word" />
<br><br>
{{word}}
</template>
<script>
import zdyinput from './zdyinput';
export default {
components:{
zdyinput
},
data(){
return {
word: '222'
}
},
}
</script>
子组件将需要一个keyword的prop并发出update:keyword要同步的事件：
<template>
<!--update为固定写法，input事件可以换成其他事件-->
<!--$event.target.value为要更新给父组件keyword的值，不能写keyword，因为这里使用value绑定，不是双向绑定-->
<input type="text" :value="keyword" placeholder="请输入内容" @input="$emit('update:keyword', $event.target.value)" />
</template>
<script>
export default {
props:['keyword']
}
</script>
2、多个 v-model 绑定绑定多个v-model和一个差不多，直接看案例：
父组件调用：
<template>
<user-name v-model:firstName="name1" v-model:lastName="name2" />
<br><br>
{{name1}} - {{name2}}
</template>
<script>
import UserName from './UserName';
export default {
components:{
UserName
},
data(){
return {
name1: '',
name2: ''
}
},
methods:{
}
}
</script>
子组件：
<template>
<input type="text" :value="firstName" placeholder="姓" @input="$emit('update:firstName', $event.target.value)" /> -
<input type="text" :value="lastName" placeholder="名" @input="$emit('update:lastName', $event.target.value)" />
</template>
<script>
export default {
props:['firstName', 'lastName']
}
</script>
<style>
input{
width: 100px;
height: 32px;
line-height: 32px;
}
</style>