In Vue 3, multiple v-model bindings cannot be used directly on a component, but similar functionality can be achieved through custom model properties and events. 1. Use the model option to customize props and event names, for example, implement multiple v-model-like bindings through model: { prop: 'title', event: 'update:title' }; 2. Manually pass props and trigger events, such as binding: username and @update:username in the parent component, declare emit in the child component; 3. Use defineProps and defineEmits in the Composition API to concisely manage multiple bidirectional bindings; 4. Note that each binding needs to be uniquely named and based on semantic naming to improve readability.

In Vue 3, you can't directly use multiple v-model bindings on a single component like you could in some earlier versions or other frameworks — but there's a clean and supported way to handle this. With the introduction of the modelValue and modelModifiers properties (and the ability to customize them), Vue gives you flexibility to manage more than one two-way binding on a component.

Here's how to work with multiple v-model-like behavior in Vue 3.

Use Custom Model Modifiers for Multiple Bindings

Vue 3 allows you to define custom v-model prop and event names using the model option in your component. This is useful when you want to bind more than one value using v-model -like syntax.

For example:

 export default {
  model: {
    prop: 'title',
    event: 'update:title'
  },
  props: ['title', 'content'],
  emits: ['update:title', 'update:content']
}

Then in the parent component:

 <MyComponent v-model:title="pageTitle" v-model:content="pageContent" />

This approach lets you mimic multiple v-model bindings by explicitly naming each binding. It keeps things readable and avoids confusion.

Pass Props and Emit Events Manually

If you're not using the model option (which is optional), you can manually pass props and emit events for each value you want to bind.

Let's say you have a component that needs to track both username and email .

In the parent:

 <CustomInput :username="user" :email="mail" @update:username="user = $event" @update:email="mail = $event" />

In the child component:

 export default {
  props: ['username', 'email'],
  emits: ['update:username', 'update:email']
}

And inside your input elements:

 <input :value="username" @input="$emit(&#39;update:username&#39;, $event.target.value)" />
<input :value="email" @input="$emit(&#39;update:email&#39;, $event.target.value)" />

This gives you full control over how each value is updated and is especially helpful if you need to add validation or formatting before updating the parent.

Use Composition API with defineProps and defineEmits

If you're working with the <script setup> syntax, handling multiple two-way bindings become even cleaner.

Define your props and emits like this:

 const props = defineProps(['username', 'email'])
const emit = defineEmits(['update:username', 'update:email'])

Then wire up your inputs:

 <input :value="props.username" @input="emit(&#39;update:username&#39;, $event.target.value)" />
<input :value="props.email" @input="emit(&#39;update:email&#39;, $event.target.value)" />

This works perfectly with the new Vue 3 syntax and keeps your code concise.

Key Points to Keep in Mind

• You can't technically have more than one v-model on a component unless you customize the prop and event names.
• Always make sure to use unique prop and event names for each binding.
• If you're using v-model without customization, it defaults to modelValue and update:modelValue .
• For better readability, name your bindings based on what they represent ( v-model:username , v-model:theme , etc.).

So, while Vue 3 doesn't support multiple v-model s out of the box, it offers flexible alternatives that are easy to implement and maintain. The key is understanding how props and events work together to enable two-way data binding.

The above is the detailed content of How to use multiple v-model bindings in Vue 3?. For more information, please follow other related articles on the PHP Chinese website!