详解vue mixins和extends的巧妙用法


Posted in Javascript onDecember 20, 2017

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的巧妙用法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript中引用示例介绍
Feb 21 Javascript
JS实现判断碰撞的方法
Feb 11 Javascript
Javascript实现快速排序(Quicksort)的算法详解
Sep 06 Javascript
利用jQuery和CSS将背景图片拉伸
Oct 16 Javascript
jquery div模态窗口的简单实例
May 28 Javascript
inner join 内联与left join 左联的实例代码
Sep 18 Javascript
javascript自定义事件功能与用法实例分析
Nov 08 Javascript
Node.js中,在cmd界面,进入退出Node.js运行环境的方法
May 12 Javascript
node跨域转发 express+http-proxy-middleware的使用
May 31 Javascript
javascript json对象小技巧之键名作为变量用法分析
Nov 11 Javascript
javascript严格模式详解(含严格模式与非严格模式的区别)
Nov 12 Javascript
手写Vue2.0 数据劫持的示例
Mar 04 Vue.js
canvas轨迹回放功能实现
Dec 20 #Javascript
jQuery实现动态控制页面元素的方法分析
Dec 20 #jQuery
js实现以最简单的方式将数组元素添加到对象中的方法
Dec 20 #Javascript
浅谈gulp创建完整的项目流程
Dec 20 #Javascript
vue使用axios实现文件上传进度的实时更新详解
Dec 20 #Javascript
JavaScript通过mouseover()实现图片变大效果的示例
Dec 20 #Javascript
详解JS模块导入导出
Dec 20 #Javascript
You might like
PHP采集静态页面并把页面css,img,js保存的方法
2014/12/23 PHP
php如何实现不借助IDE快速定位行数或者方法定义的文件和位置
2017/01/17 PHP
thinkPHP框架自动填充原理与用法分析
2018/04/03 PHP
js控制frameSet示例
2013/09/10 Javascript
jquery中对于批量deferred的处理方法
2014/01/22 Javascript
jquery操作对象数组元素方法详解
2014/11/26 Javascript
node.js中的fs.readlink方法使用说明
2014/12/17 Javascript
js封装可使用的构造函数继承用法分析
2015/01/28 Javascript
JavaScript显示当前文档最后修改日期的方法
2015/03/19 Javascript
解析javascript瀑布流原理实现图片滚动加载
2016/03/10 Javascript
基于JS设计12306登录页面
2016/12/28 Javascript
微信小程序 tabs选项卡效果的实现
2017/01/05 Javascript
一道面试题引发的对javascript类型转换的思考
2017/03/06 Javascript
vue组件传递对象中实现单向绑定的示例
2018/02/28 Javascript
微信小程序项目总结之点赞 删除列表 分享功能
2018/06/25 Javascript
JS限制输入框输入的实现代码
2018/07/02 Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
2019/01/25 Javascript
微信提示 在浏览器打开 效果实现过程解析
2019/09/10 Javascript
详解vue v-model
2020/08/31 Javascript
JS如何实现在弹出窗口中加载页面
2020/12/03 Javascript
[02:16]完美世界DOTA2联赛PWL S3 集锦第三期
2020/12/21 DOTA
python实现在控制台输入密码不显示的方法
2015/07/02 Python
python基础教程项目五之虚拟茶话会
2018/04/02 Python
python存储16bit和32bit图像的实例
2018/12/05 Python
一步步教你用python的scrapy编写一个爬虫
2019/04/17 Python
Python利用sqlacodegen自动生成ORM实体类示例
2019/06/04 Python
python爬虫项目设置一个中断重连的程序的实现
2019/07/26 Python
Python高级编程之继承问题详解(super与mro)
2019/11/19 Python
pandas 对group进行聚合的例子
2019/12/27 Python
安装并免费使用Pycharm专业版(学生/教师)
2020/09/24 Python
原生 JS+CSS+HTML 实现时序图的方法
2019/07/31 HTML / CSS
韩国流行时尚女装网站:Dintchina(中文)
2018/07/19 全球购物
建议书怎么写
2014/03/12 职场文书
高校自主招生自荐信2015
2015/03/04 职场文书
暑期辅导班宣传单
2015/07/14 职场文书
Java 多态分析
2022/04/26 Java/Android