15、Vue3 多个 v-model 绑定

通过利用以特定 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>