Building Forms with Vue.js

Understanding v-model in custom components

As you know, v-model is shorthand for v-on:input and v-bind:value="value" on a given element. It allows us to two-way bind a particular element's value, and the events that it emits to one of our internal state properties.

When talking about component composition, however, we need to take extra things into consideration.

In order for a custom component to be able to implement the v-model contract, we have to make sure that two things happen. That's right! We need to ensure that the component has a value property and that it $emits an input event.

There is a way to change this default behavior by using the model property, but it is out of the scope of this book. If you want to tell your component ...