脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → 详解vue mixins和extends的巧妙用法

详解vue mixins和extends的巧妙用法

 更新时间：2017年12月20日 09:12:00   投稿：mrr  
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为一个函数

总结

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

您可能感兴趣的文章:

相关文章

  • vue实现公共方法抽离

    vue实现公共方法抽离

    这篇文章主要介绍了vue实现公共方法抽离，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • Vue2+Echarts封装组件之专注逻辑,图表生成自动化方式

    Vue2+Echarts封装组件之专注逻辑,图表生成自动化方式

    文章介绍了使用Vue2封装的Echarts图表组件,简化了图表的生成和渲染过程,提供了多种图表类型和交互功能,提高了开发效率,帮助开发者专注于业务逻辑的开发
    2025-02-02
  • 详解vue-router的导航钩子(导航守卫)

    详解vue-router的导航钩子(导航守卫)

    这篇文章主要介绍了详解vue-router的导航钩子(导航守卫)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • Vue事件中如何获取原事件参数

    Vue事件中如何获取原事件参数

    文章介绍了如何在Vue中通过Click方法获取原事件的参数,包括默认参数、自定义参数以及如何同时获取原生事件和自定义参数的方法
    2024-12-12
  • 详解@Vue/Cli 3 Invalid Host header 错误解决办法

    详解@Vue/Cli 3 Invalid Host header 错误解决办法

    这篇文章主要介绍了详解@Vue/Cli 3 Invalid Host header 错误解决办法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • 详解Vue依赖收集引发的问题

    详解Vue依赖收集引发的问题

    这篇文章主要介绍了Vue依赖收集引发的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • VUE实现强制渲染,强制更新

    VUE实现强制渲染,强制更新

    今天小编就为大家分享一篇VUE实现强制渲染,强制更新，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • vuejs路由的传参及路由props配置详解

    vuejs路由的传参及路由props配置详解

    最近在学习vue router的传参,所以下面这篇文章主要给大家介绍了关于vuejs路由的传参及路由props配置的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-07-07
  • vue项目之前端CryptoJS加密、解密代码示例

    vue项目之前端CryptoJS加密、解密代码示例

    在Vue项目中集成CryptoJS进行数据加密,首先需要通过npm安装CryptoJS安装包,然后在项目文件中引入CryptoJS,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-11-11
  • vue百度地图实现自定义弹框样式

    vue百度地图实现自定义弹框样式

    这篇文章主要介绍了vue百度地图实现自定义弹框样式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03

最新评论