vue2 多个v-model

在Vue2中，当我们需要在一个组件中使用多个v-model时，可以使用自定义组件的语法糖来实现。通过在自定义组件中定义model选项，我们可以自定义v-model绑定的别名和事件。

首先，在自定义组件的选项中，我们可以定义一个props属性，用于接收v-model绑定的值。默认情况下，我们可以使用"value"作为props来接收v-model的值。

然后，在model选项中，我们可以定义两个属性：prop和event。prop用于指定v-model绑定的别名，而event则用于指定修改绑定值时需要触发的事件。

举个例子，假设我们有一个自定义组件叫做"customCom"，我们想要在该组件中使用两个不同的v-model，可以这样做：

<template>
  <div>
    <input v-model="customValue1" />
    <input v-model="customValue2" />
  </div>
</template>

<script>
export default {
  name: 'customCom',
  props: {
    customValue1: {},
    customValue2: {}
  },
  model: {
    prop: 'customValue1',
    event: 'input'
  }
}
</script>

在上面的例子中，我们定义了两个props：customValue1和customValue2，分别用于接收v-model绑定的值。然后，我们在model选项中将customValue1作为v-model的别名，并指定将"input"事件作为修改绑定值时触发的事件。

这样，我们就可以在使用该自定义组件时，使用v-model绑定customValue1和customValue2来实现多个v-model的效果。例如：

<template>
  <div>
    <custom-com v-model="value1" />
    <custom-com v-model="value2" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      value1: '',
      value2: ''
    }
  }
}
</script>

在上面的例子中，我们使用了两个custom-com组件，并使用v-model分别绑定了value1和value2，从而实现了多个v-model的效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [Vue2--v-model 的语法糖](https://blog.csdn.net/Ljwen_/article/details/125400803)[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: 100%"]
[ .reference_list ]