To use v-model to implement two-way binding of custom components in Vue, you must first understand its working mechanism. For custom components, you need: 1. Receive a prop named modelValue; 2. Trigger an event named update:modelValue. By default, will be parsed to , so the component needs to use :value="modelValue" and $emit('update:modelValue') to synchronize the data. In addition, you can customize the prop and event names via model: { prop: 'checked', event: 'change' }, which is suitable for different types of components such as switches or sliders. Vue 3 also supports multiple v-model bindings, such as v-model:title and v-model:content. At this time, the component needs to define title and content as props respectively, and trigger the corresponding update:title and update:content events. It is recommended to be clear to avoid conflicts. At the same time, note that .sync modifier or manually bind events are required in Vue 2. After mastering this mode, it will be more flexible to build reusable UI components.

In Vue, using v-model for two-way data binding on custom components is straightforward once you understand how it works under the hood. By default, v-model on a native input element does two things: it binds the input's value to a piece of data (like value ) and emits an event (like input ) when the value changes. For custom components, you just need to mimic this behavior.

How v-model Works with Custom Components

When you use v-model on a custom component like this:

 <CustomInput v-model="message" />

Vue translates it into:

 <CustomInput
  :modelValue="message"
  @update:modelValue="message = $event"
/>

So in your component, you need to:

• Accept a prop named modelValue
• Emit an event named update:modelValue with the new value

Here's a simple example inside a component:

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

<script>
export default {
  props: [&#39;modelValue&#39;],
  model: {
    prop: &#39;modelValue&#39;,
    event: &#39;update:modelValue&#39;
  }
}
</script>

This setup allows your custom component to work seamlessly with v-model .

Handling Different Prop/Event Names

If you don't want to use modelValue and update:modelValue , you can customize the names by updating the model option in your component. This is useful if your component represents something other than a generic input — say, a toggle switch or a slider.

For example:

 model: {
  prop: 'checked',
  event: 'change'
}

Now your component expects a checked prop and emits a change event instead of the defaults. When someone uses v-model on your component, it will automatically map to these names.

Using v-model with Multiple Bindings

Vue 3 allows multiple v-model s on a single component by using argument syntax. For example:

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

Inside the component, you define both title and content as props and emit corresponding update:title and update:content events.

This feature makes it easy to bind multiple pieces of data without having to create a more complex API for your component.

Tips for Working with v-model in Custom Components

• Always make sure your component accepts the correct prop ( modelValue by default) and emits the right event ( update:modelValue )
• If you're supporting older versions of Vue (like Vue 2), you'll need to use .sync modifiers or manually wire up the prop/event pair
• You can combine v-model with other props/events without conflict
• Use clear naming conventions when using multiple v-model s to avoid confusion

Basically that's it. Once you get the pattern down, it becomes second nature — and it opens up a lot of flexibility when building reusable UI components.

The above is the detailed content of How can v-model be used for two-way data binding on custom components in Vue?. For more information, please follow other related articles on the PHP Chinese website!