在组件上使用v-model

v-model最常见的用法是在输入框上，输入的值会自动更新到对应的属性中去。这里的v-model其实是一个语法糖，官方也有介绍。在input上使用v-model和下面这样写是等价的。

<input @input="inputValue = $event.target.value" :value="inputValue" />

基于这个思想，在vue2.2以上的版本中，在组件上也可以使用v-model属性了，官方介绍。

那么，自己封装一个input的组件custom-input，就可以按照下面这样。

<input v-bind:value="value" v-on:input="$emit('input', $event.target.value)" >

那么在custom-input上就可以使用v-model。

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

就相当于在custom-input上监听了input事件，并且将抛过来的值自动赋值到searchText中去。

那么，如果不是input的话，其他的组件就要进行一些定制了。比如select。它的值改变是发生在change的时候，所以我希望监听它的change事件，而且我想直接传递selected到子组件中表示哪个选项选中。所以，需要对其进行一些定制

<template>
  <select :value="selected" @change="emitChange($event.target.value)">
    <template v-for="option in selectData">
      <option :value="option.value">{{option.text}}</option>
    </template>
  </select>
</template>

export default {
  name: 'mySelect',
  model: {
    prop: 'selected',
    event: 'change',
  },
  props: {
    selectData: {
      type: Array,
      default: () => [],
    },
    selected: {
      type: [String, Number],
    },
  },
  methods: {
    emitChange(value) {
      this.$emit('change', value);
    },
  },
};

此处的model表示获取的selected的值，并且在父组件上使用v-model的话，会自动监听其change事件，并自动赋值。

在父组件上

<my-select v-model="selectItem" :selectData="selectData"></my-select>

综合input的样例，这里就可以理解为

<my-select @change="change" :selected="selected" :selectData="selectData"></my-select>

<script>
export default {
  data() {
    return {
      selectItem: '',
      selected: '',
    };
  },
  methods: {
    change(value) {
      this.selectItem = value;
      this.selected = value;
    },
  },
};
</script>

有了v-model，能让我们省不少代码。

关于v-model就这些，属于本人的粗俗理解，如果不正之处，欢迎指正。