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

曾几何时我们这样做

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

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

    

但是这种方式有重大缺陷

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

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

比如说以下场景

举个例子比如已有一个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，当选中项变化时，可以在事件参数中获得选中项的下标

...
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要不复制一份