vue3多个v-model

在Vue 3中，你可以使用`v-model`指令来实现双向数据绑定。然而，在Vue 3中，`v-model`只能应用于单个输入元素或组件上。如果你想要实现多个数据的双向绑定，可以通过自定义组件的方式来实现。

你可以创建一个父组件，然后在该组件中定义多个子组件，并将子组件的值通过props传递给子组件。在子组件中，你可以使用`v-model`指令将输入框的值与子组件的props进行双向绑定。

下面是一个示例：

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent v-model="value1" />
    <ChildComponent v-model="value2" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

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

<!-- ChildComponent.vue -->
<template>
  <input type="text" :value="value" @input="$emit('input', $event.target.value)" />
</template>

<script>
export default {
  props: ['value']
};
</script>

在这个示例中，父组件`ParentComponent`中包含了两个子组件`ChildComponent`。通过在子组件上使用`v-model`指令，我们将父组件的`value1`和`value2`分别与子组件的props进行了双向绑定。

这样，你就可以在父组件中实现多个数据的双向绑定了。当子组件的输入框的值发生变化时，父组件中的`value1`和`value2`也会相应地更新。