【Vue】在组件中使用 v-model

参考网址：
https://vue.docschina.org/v2/guide/components.html

在组件中使用 v-model

自定义事件(custom event)，还可以用来创建出「实现 v-model 机制的自定义输入框(custom input)」。回顾前面章节中：

<input v-model="searchText">

等同于如下：

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

而用于一个组件时，v-model 则可以替换为如下：

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

为了组件内部能够有效运行，组件内的 必须：

将 value 属性绑定到 value prop
在 input 输入框中，在自定义的 input 事件中，发送一个新的值

这里就是上面所描述的：

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

现在，我们的 custom-input 组件，应该可以实现 v-model 的完美运行：