Vue.js 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 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 = $"