一种适应性较好的扩展Vue组件的方式(已过时

曾几何时我们这样做

多少次我们打算扩展第三方Vue组件的时候是用这种方式：

// 已知有一个第三方组件  some-3rd-component
<templete>
    <some-3rd-component></some-3rd-component>
</templete>

<script>
...
some codes 写下我们需要的功能代码
...
</script>

但是这种方式有重大缺陷

第三方组件的事件、属性、方法等都被隐藏了
重新暴露十分麻烦，效率低下，可能需要大量复制粘贴
本质是封装而非扩展

有什么办法可以做到低侵入、适应性好、可以扩展功能、又不影响被扩展的组件呢？

比如说以下场景

举个例子比如已有一个ElementUi组件： el-select，这个组件有一个缺陷，无法获知选中的下拉选项在数组中的位置。
比如说我有个数组

[{name:'广州',code:'Guangzhou',population:'10'},
{name:'上海',code:'Shanghai',population:'11'},
{name:'北京',code:'Beijing',population:'12'}]

我希望在选择完城市之后，获的选中城市的population属性的值，要怎么办？
至少在成文的这个时间里，el-select 还没有方便的办法。

introducing vue mixin

minxin 官方文档的描述是这样的：

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

使用Vuez自带的mixin在扩展组件的时候十分好用，它避免了前文中的缺陷，可以恰当地实现我们所要的功能

我们要做的是，建立一个自定义组件，然后把想要扩展的组件"mixin"进来。

* 说点题外话，如果你的ElementUi是全局引入的，那么你也许不能直接通过 import 来引入一个组件对象

import Vue from 'vue';

var elSelect = Vue.component('ElSelect'); // 引入要扩展的对象

export default {
  name: 'ElSelectEx',
  mixins: [elSelect],
  watch: {
    selected: function (val, oldVal) {
      let oldSelected = this.selectEx.selectedIndexes;
      let selectedIndex = this.getSelectedIndex(val);
      this.selectEx.selectedIndexes = selectedIndex;
      if (oldSelected !== undefined && oldSelected !== null) {
        // 刚初始化没有值，就不发布更新了
        this.$emit('selectedIndexChanged', selectedIndex, oldSelected);
      }
    },
  },
  data() {
    return {
      selectEx: {
        selectedIndexes: null,
      }
    }
  },
  methods: {
    getSelectedIndex(selected) {
      if (this.multiple) {
        let result = [];
        selected.forEach(item => {
          result.push(this.options.indexOf(item))
        });
        return result;
      } else {
        return this.options.indexOf(selected);
      }
    }
  }
}

使用时，跟原来的 el-select 没什么两样，但是现在多了一个事件 selectedIndexChanged，当选中项变化时，可以在事件参数中获得选中项的下标

<template>
  <div>
    <el-select-ex v-model="selected" @selectedIndexChanged="selectIndexChange">
      <el-option v-for="item in options" :value="item.code" :label="item.name"></el-option>
    </el-select-ex>
  </div>
</template>

...
data(){
  return{
    options:[{name:'广州',code:'Guangzhou',population:'10'},
            {name:'上海',code:'Shanghai',population:'11'},
            {name:'北京',code:'Beijing',population:'12'}]
    }
}
methods:{
  selectIndexChange(val,oldVal){
    console.info(this.options[val].population);
  }
}

后续

1 这种扩展方式也有一个缺陷，就是不能自如地修改布局，如果硬要改的话，要不重新写render要不复制一份<template>，还是有点蛋疼
2 使用 extends可以达到相同的效果

后续2
vue 还提供了 $attrs 获取绑定的属性
可以通过 v-bind="$attrs"传入内部组件
以及 $listeners 获取绑定的事件
可以通过 v-on="$listeners" 传入内部组件

让创造基于其他组件库的组件更加便利