Creating custom input components with v-model

We also can use a component to create custom two-way binding inputs that work the same as a v-model directive for emitting events to the parent. Let's create a basic custom input component:

<custom-input v-model="newTodoText"></custom-input>

Vue.component('custom-input', {
  props: ['value'],
  template: `<input v-on:input="$emit('input', $event.target.value)">`,
})

How does it work? To understand this, we need to understand how v-model works under the hood. Let's use a simple v-model input:

<input v-model="handler">

The preceding <input> element is shorthand for the following:

<input
  v-bind:value="handler"
  v-on:input="handler = $event.target.value"
>

So, writing v-model="newTodoText" in our custom input is shorthand for the following:

v-bind:value="newTodoText"
v-on:input="newTodoText...