曾几何时我们这样做
多少次我们打算扩展第三方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" 传入内部组件
让创造基于其他组件库的组件更加便利
