当前位置:Gxlcms > JavaScript > 在vue中详细介绍mixins和extends用法

在vue中详细介绍mixins和extends用法

时间:2021-07-01 10:21:17 帮助过:35人阅读

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的函数,再调用父组件的函数。

虽然也能在创建mixin时添加data、template属性,但当父组件也拥有此属性时以父为准,从这一点也能看出制作者的用心(扩充)。

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

extends

调用方式: extends: CompA

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

extend

扩展组件的构造器

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

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

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

在Angular中如何实现table表格排序

在Angular中如何实现验证

有关于JavaScript使用中Object值如何合并

有关JavaScript的伪数组用法(详细教程)

以上就是在vue中详细介绍mixins和extends用法的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行