Vue.js Custom Components with v-model
Introduction
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.
Remarks
To have v-model on a component you need to fulfil two conditions.
- It should have a prop named 'value'
- It should emit an
inputevent with the value expected by the parent components.
<component v-model='something'></component>
is just syntactic sugar for
<component
:value="something"
@input="something = $event.target.value"
>
</component>
