Vue入门系列（六）组件继承mixin

mixin在官网上的解释为"混合”-以组件使用混合对象时，所有混合对象的选项将被混入该组件本身的选项。

但是笔者觉得，如果从面向对象层面去解释，会更清楚些。我们知道，面向对象三大基本特征是：抽象，封装和继承。

组件，就是对功能的抽象，通过封装而成为完成某个特定功能的模块。Vue的宗旨是，组件是最小粒度，通过组合不同的组件，实现更加复杂的UI（与React一样）。

那么，如果组件之间有某些共性呢？这时，就应该用到继承。将通用的逻辑封装为功能模块，提供给不同组件使用。如果是Java，继承时通过extend父类/接口实现，在Vue中，并没有extend的关键字，但是，mixin可以完成类似效果，即复用/混合。

假设我们有两个下拉组件，核心代码，即列表生成，列表项选中等操作是完全一样的，只是显示效果不同。那么，可以采用如下方式实现继承关系：

// commonList.js
export default {
  props: {
    items: []
  }
  data(){
    return { selectedItem: null};
  }
  ...
}

//DropdownA.vue
import commonList from '.commonList';

export default {
  name: 'DropdownA',
  mixins: [commonList ]
}

//dropdownB.vue
import commonList from '.commonList';

export default {
  name: 'DropdownB',
  mixins: [commonList ]
}

如果组件和基类对象含有同名选项时：

• 钩子函数： 混合为一个数组 ，基类对象的钩子将在组件自身钩子之前调用
• 值为对象的选项： 如 methods, components 和 directives，将被混合为同一个对象。 两个对象键名冲突时，取组件对象的键值对。

更多高阶内容，可移步《小专栏-娜姐聊前端》。