vue3 多个 v-model

在Vue3中，可以通过使用多个v-model来实现父子组件之间的双向数据绑定。通过在父组件中使用v-model指令并传递子组件的属性名，实现对子组件属性的修改和监听。在子组件中，通过接收props并使用$emit方法来触发父组件的更新事件。这样就可以实现多个v-model的绑定。

例如，在Vue3中可以这样使用多个v-model绑定：

<template>
  <div>
    <test v-model:num1="num1" v-model:num2="num2"/>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const num1 = ref(1);
    const num2 = ref(1);

    return {
      num1,
      num2
    };
  }
}
</script>

<test>
  <div @click="incrNum1">{{ num1 }}</div>
  <div @click="incrNum2">{{ num2 }}</div>
</test>

在这个例子中，父组件使用v-model指令将num1和num2属性与子组件的num1和num2属性进行绑定。在子组件中，通过点击事件触发incrNum1和incrNum2方法，这两个方法通过$emit('update:num1', this.num1 + 1)和$emit('update:num2', this.num2 + 2)来更新父组件的num1和num2属性。

这样，当在子组件中点击对应的div时，父组件的num1和num2属性会更新，并且更新的值会同步到子组件中展示出来。这就实现了多个v-model的绑定。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [vue3.0深入v-model以及使用多个v-model](https://blog.csdn.net/weixin_43845137/article/details/123534181)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [VUE3 之 多个 v-model 绑定及 v-model 修饰符的使用](https://blog.csdn.net/u011181989/article/details/122705587)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]