input不管用 vue_Vue自定义组件实现v-model的两种方式

你可以用 v-model指令在表单 <input>、 <textarea>及 <select>元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。 ———— 摘自 vue 官网

关于 v-model 的使用这里不再赘述。这里只讨论如何在自定义组件实现 v-model。根据vue 的官网的描述，我们大概知道，v-model 的本质就是语法糖，即：

<input type="text" v-model="name">

相当于：

<input type="text" :value="name" @input="name = $event.target.value">

因此只要在一个自定义组件内通过设置一个名为 value 的 prop，并且在数据发生变化时 $emit 一个带新值的 input 事件，就可以在该自定义组件中使用 v-model 进行双向绑定。非常简单，就像这种：

<template>
    <input type="text" :value="value" @input="handleInput" :placeholder="placehodler" />
</template>
<script>
  export default {
    name: 'kInput',
    props: {
        value: ['String', 'Number'],
        placeholder: String
    },
    methods: {
        handleInput ($event) {
            // 通过input标签的原生事件input将值emit出去，以达到值得改变实现双向绑定
            this.$emit('input', $event.target.value)
        }
    }
  }
</script>
<style scoped type="less">
</style>

然而，最近在翻 vue 官网文档，竟然被我发现了另一中实现 v-model 的方法（只怪当初文档没看仔细，时常翻翻文档果然有好处）。

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

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

可以看到， vue 为了兼容部分表单元素的特殊用户，对 v-model 的实现做了扩充，同时也更加灵活了。