详解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 相关文章推荐
use jscript with List Proxy Server Information
Jun 11 Javascript
js利用div背景,做一个竖线的效果。
Nov 22 Javascript
firefox firebug中文入门教程 脚本之家新年特别版
Jan 02 Javascript
触屏中的JavaScript事件分析
Feb 06 Javascript
jfinal与bootstrap的登录跳转实战演习
Sep 22 Javascript
简单实现js选项卡切换效果
Feb 03 Javascript
DIV随滚动条滚动而滚动的实现代码【推荐】
Apr 12 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
Sep 27 Javascript
vue脚手架及vue-router基本使用
Apr 09 Javascript
layui字体图标 loading图标静止不旋转的解决方法
Sep 23 Javascript
JS原生实现轮播图的几种方法
Mar 23 Javascript
Ajax实现局部刷新的方法实例
Mar 31 Javascript
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递归创建多级目录
2015/11/05 PHP
Zend Framework教程之MVC框架的Controller用法分析
2016/03/07 PHP
PHP封装的page分页类定义与用法完整示例
2018/12/24 PHP
php日志函数error_log用法实例分析
2019/09/23 PHP
js监听键盘事件示例代码
2013/07/26 Javascript
javascript四舍五入函数代码分享(保留后几位)
2013/12/10 Javascript
jquery实现显示已选用户
2014/07/21 Javascript
jQuery的one()方法用法实例
2015/01/19 Javascript
简述Jquery与DOM对象
2015/07/10 Javascript
JavaScript 常见安全漏洞和自动化检测技术
2015/08/21 Javascript
jQuery复制表单元素附源码分享效果演示
2015/09/30 Javascript
js实现表单提交后不重新刷新当前页面
2016/11/30 Javascript
JS中移除非数字最多保留一位小数
2018/05/09 Javascript
深入浅析Node环境和浏览器的区别
2018/08/14 Javascript
使用React-Router实现前端路由鉴权的示例代码
2020/07/26 Javascript
使用Python的Zato发送AMQP消息的教程
2015/04/16 Python
Python实现的文本对比报告生成工具示例
2018/05/22 Python
Python实现快速傅里叶变换的方法(FFT)
2018/07/21 Python
Python逐行读取文件中内容的简单方法
2019/02/26 Python
Python Django 页面上展示固定的页码数实现代码
2019/08/21 Python
python3.6.5基于kerberos认证的hive和hdfs连接调用方式
2020/06/06 Python
使用tensorflow根据输入更改tensor shape
2020/06/23 Python
Python爬虫爬取新闻资讯案例详解
2020/07/14 Python
python如何删除列为空的行
2020/07/17 Python
挂职自我鉴定
2014/02/26 职场文书
售后服务承诺书
2014/03/26 职场文书
环保倡议书怎么写
2014/05/16 职场文书
婚内房产协议书范本
2014/10/02 职场文书
降价通知函
2015/04/23 职场文书
2016年小学生新年寄语
2015/08/18 职场文书
民事调解协议书
2016/03/21 职场文书
Java elasticsearch安装以及部署教程
2021/06/28 Java/Android
试了下Golang实现try catch的方法
2021/07/01 Golang
JS数组方法some、every和find的使用详情
2021/10/05 Javascript
Python 详解通过Scrapy框架实现爬取百度新冠疫情数据流程
2021/11/11 Python
小喇叭开始广播了! 四十多年前珍贵老照片
2022/05/09 无线电