element-ui组件的二次封装

前言

假如有个需求，输入框在输完内容后进行判断是否为纯空格，如果是纯空格，就要清空输入框，对于el-form组件的表单验证，在rules中的required为true时，纯空格也能检验通过，于是开始对el-input组件进行二次封装。

1、一般说到二次封装，很多人是这样封装的，我以前也是：

• 父级 main.vue

• 子组件 my-input.vue

你会发现这个输入框你不能输入任何东西，因为子组件my-input并没有支持任何传参，于是接着改：

如果要全部输入框都支持“不允许输入纯空格”，就将它封装成全局组件，看似完美，但是你会发现，el-input组件除了可以进行值的双向绑定，它还支持size、readonly、disabled...等18个属性，7个事件，于是接着写一大堆“中间代码”来继承原有el-input的各种属性、事件。

2、改进： 利用 v-bind="$attrs" 和 v-on="$listeners" 来“继承” el-input 组件的属性和事件

如果将这样的组件覆盖原有的el-input，那就会出问题，它并不支持插槽...，有想翻桌子的冲动。那么，有没有一种只想改我想改的部分，其它的不动，不需要自己手写代码去“继承”呢？

3、使用 extends 选项对组件进行扩展

• 雏形

这样就能对组件各种改改改；
template里面的内容是复制过来的，一般不需要改动，如果需要改的话当然也可以这么做。

• 改进
  如果不需要template，那就写在“*.js”文件中

import Vue from 'vue';
import ElementUI from 'element-ui';

Vue.component('el-input', {
  extends: ElementUI.Input,
  created() {
    this.$on('change', (value)=> {
      if (Object.prototype.toString.call(value) === '[object String]' && value.trim() === '') {
        this.$emit('input', '')
      }
    })
  }
})

这下简洁多了！

• 局部组件