时间：2021-07-17 08:09:36 | 栏目：vue | 点击：次
vue提供了mixins、extends配置项，最近使用中发现很好用。
混合mixins和继承extends
看看官方文档怎么写的，其实两个都可以理解为继承，mixins接收对象数组（可理解为多继承），extends接收的是对象或函数（可理解为单继承）。
继承钩子函数
const extend = {
created () {
console.log('extends created')
}
}
const mixin1 = {
created () {
console.log('mixin1 created')
}
}
const mixin2 = {
created () {
console.log('mixin2 created')
}
}
export default {
extends: extend,
mixins: [mixin1, mixin2],
name: 'app',
created () {
console.log('created')
}
}
控制台输出
extends created mixin1 created mixin2 created created
继承methods
const extend = {
data () {
return {
name: 'extend name'
}
}
}
const mixin1 = {
data () {
return {
name: 'mixin1 name'
}
}
}
const mixin2 = {
data () {
return {
name: 'mixin2 name'
}
}
}
// name = 'name'
export default {
mixins: [mixin1, mixin2],
extends: extend,
name: 'app',
data () {
return {
name: 'name'
}
}
}
// 只写出子类，name = 'mixin2 name'，extends优先级高会被mixins覆盖
export default {
mixins: [mixin1, mixin2],
extends: extend,
name: 'app'
}
// 只写出子类，name = 'mixin1 name'，mixins后面继承会覆盖前面的
export default {
mixins: [mixin2, mixin1],
extends: extend,
name: 'app'
}
下面单独介绍下mixins、extends、extend
mixins
调用方式: mixins: [mixin1, mixin2]
是对父组件的扩充，包括methods、components、directive等。。。
触发钩子函数时，先调用mixins的函数，再调用父组件的函数。
虽然也能在创建mixin时添加data、template属性，但当父组件也拥有此属性时以父为准，从这一点也能看出制作者的用心（扩充）。
data、methods内函数、components和directives等键值对格式的对象均以父组件/实例为准
extends
调用方式: extends: CompA
同样是对父组件的扩充，与mixins类似，但优先级均次于父组件
extend
扩展组件的构造器
当我们调用vue.component('a', {...})时自动调用
值得注意的是extend内的data为一个函数
总结