通过利用以特定 prop 和事件为目标的能力，现在可以在单个组件实例上创建多个 v-model 绑定。
每个 v-model 将同步到不同的 prop，而不需要在组件中添加额外的选项：
案例
- components/inputcmp.vue
<!-- -->
<template>
<input type="text" :value="name" @input="$emit('update:name', $event.target.value)">
<input type="text" :value="title" @input="$emit('update:title', $event.target.value)">
<input type="text" @input="$emit('otherev', $event.target.value)">
</template>
<script>
export default {
props: {
name: String,
title: String
},
emits: ["update:name", 'update:title', 'otherev']
}
</script>
- demo.vue
<!-- -->
<template>
<p>name: {{ name }}</p>
<p>title: {{ title }}</p>
<inputcmp v-model:name="name" v-model:title="title" @otherev="otherevfun" />
</template>
<script>
import { reactive, toRefs } from "vue";
import inputcmp from "/@/components/inputcmp.vue";
export default {
components: {
inputcmp,
},
setup() {
let value = reactive({
name: "zs",
title: "ls",
});
//
let otherevfun = (e)=>{
console.log('e == ', e);
}
//
return {
... toRefs(value),
otherevfun
}
},
};
</script>
