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 ]
}

如果组件和基类对象含有【同名属性】时：

• 对于created，mounted 等生命周期函数 mixin文件中的代码先执行，组件中的后执行
• 对于data中定义的字段，组件中定义组件覆盖mixin中同名字段
• 对于 method中的同名方法，组件内的同名方法覆盖mixin中的方法