二次封装输入组件的基本思路（el-input 为例）

需求

基于 el-input 二次封装，使得组件可以通过 js 配置对象批量生成，并且仍然能通过 v-model 绑定数据。

基本原理

官方文档参考：https://cn.vuejs.org/v2/guide/components-custom-events.html#自定义组件的-v-model

基于原生 input 元素和基于自定义组件绑定 v-model 的开发思路基本相同，都是给初始组件绑定一个变量，然后通过 this.$emit(事件名, 数据) 进行返回，但有细微的区别：

• 基于原生 input 元素，是绑定一个内部变量 :value="input"，并在 handleInput 方法中触发 this.$emit('input', event.target.value)。
• 基于自定义组件时，是绑定一个名为 value 的 prop，并在 handleInput 方法中触发 this.$emit('input', value)。

注意方法的参数其实也有区别，对于原生 input 的事件回调，参数是 event，而自定义组件中的参数直接是 value。这是因为内部的 input 元素触发的是 "input" 自定义事件，而非原生 input 事件；此时已经是把数据传递出来了，也就是 event.target.value，所有在自定义组件的回调函数中可以直接接收 value 值。

基于原生 input 元素：

<template>
  <input type="text" :value="input" @input="handleInput" />
</template>

<script>
export default {
  name: 'new-input',
  data() {
    return {
      input: '',
    };
  },
  methods: {
    handleInput(event) {
      this.$emit('input', event.target.value);
    },
  },
};
</script>

基于自定义组件：

<template>
  <el-input type="text" :value="value" @input="handleInput"></el-input>
</template>

<script>
export default {
  name: 'new-input',
  props: {
    value: '',
  },
  methods: {
    handleInput(value) {
      this.$emit('input', value);
    },
  },
};
</script>