详解vue mixins和extends的巧妙用法
vue提供了mixins、extends配置项，最近使用中发现很好用。
混合mixins和继承extends
看看官方文档怎么写的，其实两个都可以理解为继承，mixins接收对象数组（可理解为多继承），extends接收的是对象或函数（可理解为单继承）。
继承钩子函数
constextend={
created(){
console.log('extendscreated')
}
}
constmixin1={
created(){
console.log('mixin1created')
}
}
constmixin2={
created(){
console.log('mixin2created')
}
}
exportdefault{
extends:extend,
mixins:[mixin1,mixin2],
name:'app',
created(){
console.log('created')
}
}
控制台输出
extendscreated mixin1created mixin2created created
- 结论:优先调用mixins和extends继承的父类，extends触发的优先级更高，相对于是队列
- push(extend,mixin1,minxin2,本身的钩子函数)
- 经过测试，watch的值继承规则一样。
继承methods
constextend={
data(){
return{
name:'extendname'
}
}
}
constmixin1={
data(){
return{
name:'mixin1name'
}
}
}
constmixin2={
data(){
return{
name:'mixin2name'
}
}
}
//name='name'
exportdefault{
mixins:[mixin1,mixin2],
extends:extend,
name:'app',
data(){
return{
name:'name'
}
}
}
//只写出子类，name='mixin2name'，extends优先级高会被mixins覆盖
exportdefault{
mixins:[mixin1,mixin2],
extends:extend,
name:'app'
}
//只写出子类，name='mixin1name'，mixins后面继承会覆盖前面的
exportdefault{
mixins:[mixin2,mixin1],
extends:extend,
name:'app'
}
- 结论：子类再次声明，data中的变量都会被重写，以子类的为准。
- 如果子类不声明，data中的变量将会最后继承的父类为准。
- 经过测试，props中属性、methods中的方法和computed的值继承规则一样。
下面单独介绍下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为一个函数
总结
以上所述是小编给大家介绍的vuemixins和extends的巧妙用法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！