To receive the values from HTML form elements we use the v-model
directive in Vue 2. It is a directive that comes with Vue.
You can apply this directive to any type of input
field, select
, or textarea
in HTML.
The v-model helps us to bind an HTML form element with a variable so that if someone enters something in that input element, the value automatically gets stored in that variable.
It also works in opposite direction. If you set a default value to that variable then the input element also shows the default value. This process is knowns as two-way data binding.
The v-model
directive is not limited to just HTML form elements. You can add v-model
to custom components as well.
In this article, I will show you how you can add v-model to custom components in Vue 2.
If you are using Vue 3, you can follow our other post where I have shown the best way to use v-model to components in Vue 3.
But to follow this article you must have basic knowledge of Vue 2, HTML input, and form elements, and you should also know about Vue directives.
Why Use v-model to Custom Components
If we can use v-model
with any HTML input fields then why do we need to add support for this directive to a component?
One of the main reasons we use Vue or any frontend framework is to make the development process simple. We can do that by creating small reusable sections of our application.
That is why often we need to receive value from an input field that is present in another component. This is where we need to add v-model
to our components.
How Does v-model Work in Vue 2?
We need to know, how v-model
directive works internally to add this to our components.
When we use v-model
directive to an input
field, Vue does two things behind the scene. It binds the value
attribute of that input field and adds @input
event.
<input type="text" v-model="title" />
<!-- Similar to this -->
<input type="text" :value="title" @input="updateValue" />
Whenever a user enters something in the field that event fires and Vue updates the input value as well as updates the title
variable.

How to Add v-model to Custom Components in Vue 2
First, you have to create a component in your Vue 2 project. I have created a BaseInput.vue
component. You can name it anything you want.
<!-- BaseInput.vue component -->
<template>
<div>
<input type="text" :value="value" @input="updateValue" />
</div>
</template>
<script>
export default {
name: 'BaseInput',
props: ['value'],
methods: {
updateValue(event) {
this.$emit('input', event.target.value)
}
},
}
</script>
In the template section, I have used the input element. you can use any form element like checkbox, radio button, select, etc.
In this component, Vue 2 will send a prop with a name value
automatically when you attach v-model
to it. You have to bind the value
attribute in the input field with this prop.
Finally, add an @input
event to that input field that will run a function called updateValue
. You can name this function whatever you want.
From this function, you must emit a custom event. The name of the event must be input
because by default Vue 2 waits for this event.
Note: I will how you how you can change the default prop name and event name in the next section.
That's it, your component is ready to use.
<!-- App.vue component -->
<base-input v-model="title"></base-input>
Now you can import and use the BaseInput.vue
component inside any other components and use v-model
with it.
Here, title
is a variable that is present in App
component. When a user enters something in the input
field, this variable will store the value.
If you set any default value to this variable, the input
field will show the default value.
How to Change v-model Default Prop and Event Names in Vue 2
You can customize the default prop value
that passes by Vue 2 and the event input
that Vue 2 listens to.
If you don't want to use the default names, you can change those names according to your need.
<!-- BaseInput.vue component -->
<template>
<div>
<input type="text" :value="title" @input="updateValue" />
</div>
</template>
<script>
export default {
name: 'BaseInput',
props: ['title'],
model: {
prop: 'title',
event: 'changeTitle'
},
methods: {
updateValue(event) {
this.$emit('changeTitle', event.target.value)
}
},
}
</script>
In the previous example, we added a prop called value
. This time we will change the name to title
and as event name, we will use changeTitle
instead of input
. You can use any name.
To make them work, we have to add an object called model
inside our <script>
tag. This object contains two properties.
One is prop
where we have to mention our custom prop name that is title
and another property is event
where we have to set our custom event name that is changeTitle
in our case.
Note: You have to mention
title
in props and in model object.
That's it. Now you can bind your custom prop name with :value=""
in an input field and emit a custom event from the component.
<!-- App.vue component -->
<base-input v-model="title"></base-input>
You can also use BaseInput.vue
component in a similar way as you did in the previous example.
Conclusion
This is an easy and quick way to add v-model
support to a component. You can customize the default settings as well.
Now you know how to add v-model to custom components in Vue 2. I hope that you will be able to use this in your Vue 2 projects.