Vue Custom Component V Model

Posted on  by admin

In Vue 3, the v-model is a directive that is used for creating two-way data binding. Normally, we use this directive to bind any HTML form element with a variable to collect the input value.

But often we need to bind with a form element, that is present in a different component. In this case, you have to use a v-model to custom components.

In this way, you can bind a variable with an HTML element that is inside a child component. In the latest version of Vue i.e. Vue 3, we have to follow different rules than we used to follow in Vue 2.

In this article, I will show you how you can add the v-model to custom components in Vue 3 very easily in the best possible way. If you are using Vue 2, you can follow our other post on how to add v-model to custom components in Vue2.

In Vue 2, we had only one way to create a component. But in Vue 3, we can create a component in 3 different ways. Options API (This is old-style was available in Vue 2).

Composition API. SFC (Single File Components) Script Setup. I will show you how you can use the v-model to custom components using all three ways.

Before following this article, there are some basic requirements that you need to have. Basic knowledge about Vue 3.

You should know about HTML form elements. You should know about Vue 3 directives and how to use them. The two-way data binding is a way to connect an HTML form element and a variable so that if the value in one place changes, it also reflects in another place.

How to Add v-model to Custom Components

For example, if the value in the form element changes then the value stored in the variable will also change automatically at the same time.

It will also update the value in every place that variable was used in the template so that users always see the latest value. This process is very helpful if we have to show the changes in real-time to our users.

In Vue, the v-model directive uses this technique by default. As you know, we use v-model to bind a variable and a form element together so that if you change the value in one place it also changes in another one.

Modifiers for v-model

But to implement v-model to custom components, have to know how this directive works in the background.

When we add v-model in an input field, Vue automatically adds two things behind the scene to that input. Vue bind the value attribute of that input field with the variable we provide in v-model. Vue adds the JavaScript input event to that input field so that every time users write or remove something in the input field that event fires.

This is exactly what you have to do if you want to use v-model to custom components in Vue 3. To add v-model support to a component, you have to do two things that the v-model directive does to an input field behind the scene.

Customizing v-model Default Prop and Event Names in Components

You have to bind the value attribute in that input field with a prop called modelValue. You must name this prop as modelValue, it is case sensitive.

You have to listen to the input event and emit a custom event every time that input event fires. You have to name the custom event as update:modelValue, it is also case sensitive.

Note:I will show you how you can use different names for prop and custom event in the later part of this article. You can use any HTML Form Element like input, select, textarea etc. In this section, I will show you how you can apply v-model to a custom component using options API.

First, you have to create a component in your Vue 3 project. I have created a component with the name BaseInput.vue, you can give any name you want.

In this component, I have an HTML input field in which I want to create two-way data binding. Here, I have to bind the value attribute in the input field with modelValue prop and emit udpate:modelValue event.

Every time the input event fires, it runs the method updateValue. Vue automatically passes the event object to this method.

And this method emits the custom event with the value user entered in the input field.

Now you can use this component in any other component and add v-model directive. I have used the BaseInput.vue component inside App.vue component.

Here, App is the parent component that has a variable called “content”. Every time someone enters something in the input field, this variable will store that value. Similarly, if you set a default value to this variable, this value will show up inside the input field.

That’s how you can add v-model to custom components in Vue 3 using options API. If you are using Vue 3 composition API in your component, you can follow this method to add v-model support to a custom component.

Adding v-model to Custom Components

In composition API, we have to use the same prop name and emit the same event as the options API. You just have to follow the composition API syntax in your component.

In this component, I have used the setup() function that is required for composition API.

Now you can use the BaseInput component in any other components and apply the v-model directive to it. Also Read:Composition API VS Options API in Vue 3 For Beginners. SFC (Single File Components) is another syntax introduced in the latest version of Vue 3.

Using this syntax, you can write clean and readable code inside your component. This syntax is the part of composition API. But the difference is the way we write it.

In the earlier version of Composition API, we had to use setup() function. But in the new syntax, you use the word setup in the