当前位置：首页 > news >正文

uniapp 混合mixins和继承extends详解

news 2025/9/14 6:04:41

1. uniapp 混合mixins和继承extends详解

vue提供了mixins、extends配置项。
混合mixins和继承extends其实两个都可以理解为继承，mixins接收对象数组（可理解为多继承），extends接收的是对象或函数（可理解为单继承）。

1.2. 继承钩子函数

1.2.1. 示例

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

1.2.2. 结论

（1）优先调用mixins和extends继承的父类，extends触发的优先级更高，相对于是队列
（2）push(extend, mixin1, minxin2, 本身的钩子函数)
（3）经过测试， watch的值继承规则一样。

1.3. 继承methods

1.3.1. 示例

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

1.3.2. 结论

（1）子类再次声明，data中的变量都会被重写，以子类的为准。
（2）如果子类不声明，data中的变量将会最后继承的父类为准。
（3）经过测试， props中属性、 methods中的方法和 computed的值继承规则一样。

1.4. mixins、extends、extend

1.4.1. mixins

（调用方式: mixins: [mixin1, mixin2]
（是对父组件的扩充，包括methods、components、directive等。。。
（触发钩子函数时，先调用mixins的函数，再调用父组件的函数。
（虽然也能在创建mixin时添加data、template属性，但当父组件也拥有此属性时以父为准，从这一点也能看出制作者的用心（扩充）。
（data、methods内函数、components和directives等键值对格式的对象均以父组件/实例为准。