Questions And Answers

More Tutorials

Custom Components with v-model


Often times we have to create some components which perform some actions/operations on data and we require that in the parent component. Most of the times vuex would be a better solution, but component in cases where the child component's behavior has nothing to do with application state, for instance: A range-slider, date/time picker, file reader Having individual stores for each component each time they get used gets complicated.


To have v-model on a component you need to fulfil two conditions.
1. It should have a prop named 'value'.

2. It should emit an input event with the value expected by the parent components.

<component v-model='something'></component>

is just syntactic sugar for

 @input="something = $"


v-model on a counter component

Here counter is a child component accessed by demo which is a parent component using v-model.
// child component
Vue.component('counter', {
 template: `<div><button @click='add'>+1</button>
 <button @click='sub'>-1</button>
 <div>this is inside the child component: {{ result }}</div></div>`,
 data () {
 return {
 result: 0
 props: ['value'],
 methods: {
 emitResult () {
this.$emit('input', this.result)
 add () {
 this.result += 1
 sub () {
 this.result -= 1

This child component will be emitting result each time sub() or add() methods are called.
// parent component
new Vue({
 el: '#demo',
 data () {
 return {
 resultFromChild: null
// parent template
<div id='demo'>
 <counter v-model='resultFromChild'></counter>
 This is in parent component {{ resultFromChild }}

Since v-model is present on the child component, a prop with name value was sent at the same time, there is an input event on the counter which will in turn provide the value from the child component.


In this page (written and validated by ) you learned about VueJs Custom Components with v model . What's Next? If you are interested in completing VueJs tutorial, your next topic will be learning about: VueJs Custom Directives.

Incorrect info or code snippet? We take very seriously the accuracy of the information provided on our website. We also make sure to test all snippets and examples provided for each section. If you find any incorrect information, please send us an email about the issue:

Share On:

Mockstacks was launched to help beginners learn programming languages; the site is optimized with no Ads as, Ads might slow down the performance. We also don't track any personal information; we also don't collect any kind of data unless the user provided us a corrected information. Almost all examples have been tested. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. By using, you agree to have read and accepted our terms of use, cookies and privacy policy.