在组件上使用v-model

基础

<input v-model="searchText">
等价于：

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

其中$event.target.value表示获取输入框的值。

将其使用在组件上时

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

其中$event表示$emit抛出的值，即$emit的第二个参数。

组件代码

Vue.component('custom-input', {
  props: ['value'],
  template: ‘
    <input
      v-bind:value="value"     //"value"对应props里面的value
      v-on:input="$emit('input', $event.target.value)"
    >
  ’
})

使用方式

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