Vue在表单中双向绑定我们一般都是这样做：

<input v-model="searchText">

用到的就是v-model的语法糖，其实这种语法糖等价于

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

具体说来就是：

1、将输入框的值绑定到searchText变量上，这个是单向绑定，意味着改变searchText变量的值可以改变input的value，但是改变value不能改变searchText

2、监听input事件（input输入框都有该事件，当输入内容时自动触发该事件），当输入框输入内容就单向改变searchText的值

那如果我们想在自定义组件中使用v-model呢？类似如下的写法

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

等价于：

<custom-input
  v-bind:value="searchText"
  v-on:input="searchText = $event"
></custom-input>

我们怎么做？

（1）、首先我们需要将父组件的value值通过props传递给子组件

（2）、当子组件发现value值变化之后，需要通知父组件时候，触发该组件的input事件，并$emit给父组件

修改一下官方的代码：

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

只是在input事件触发之后，$emit事件出去，并将value值通知出去即可。

以上转载至：如何在自定义组件中使用v-model ，并加入一些自己的理解。