详解vue mixins和extends的巧妙用法

详解vue mixins和extends的巧妙用法

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

结论: 优先调用mixins和extends继承的父类，extends触发的优先级更高，相对于是队列

push(extend, mixin1, minxin2, 本身的钩子函数)

经过测试， watch的值 继承规则一样。

继承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'

}

结论：子类再次声明，data中的变量都会被重写，以子类的为准。

如果子类不声明，data中的变量将会最后继承的父类为准。

经过测试， props中属性 、 methods中的方法 和 computed的值 继承规则一样。

下面单独介绍下mixins、extends、extend

mixins

调用方式: mixins: [mixin1, mixin2]

是对父组件的扩充，包括methods、components、directive等。。。

触发钩子函数时，先调用mixins的函数，再调用父组件的函数。

data、methods内函数、components和directives等键值对格式的对象均以父组件/实例为准

extends

调用方式: extends: CompA

同样是对父组件的扩充，与mixins类似，但优先级均次于父组件

extend

扩展组件的构造器

当我们调用vue.component('a', {...})时自动调用

值得注意的是extend内的data为一个函数

总结

以上所述是给大家介绍的vue mixins和extends的巧妙用法，希望对大家有所帮助，如果大家有任何疑问请给我留言，会及时回复大家的。在此也非常感谢大家对我们网站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。