关于vue的v-model的自己理解（用于自己复习）

关于vue的v-model的自己理解

1.在一般使用情况下，v-model为：

<input v-model="searchText">

等价于

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

2.在组件中，v-model为：

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

等价于

<custom-input v-bind:value="searchText" v-on:input="searchText = arguments[0]"></custom-input>

一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value 特性用于不同的目的。model 选项可以用来避免这样的冲突：

Vue.component('base-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean
  },
  template: `
    <input
      type="checkbox"
      v-bind:checked="checked"
      v-on:click="$emit('change', $event.target.checked)"
    >
  `
})

添加model后相当于把value和input替换掉了

<base-checkbox v-bind:checked="checked" v-on:change="checked=arguments[0]"></base-checkbox>