详解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 相关文章推荐
IE6、IE7中获取Button元素的值的bug说明
Aug 28 Javascript
js实现在页面上弹出蒙板技巧简单实用
Apr 16 Javascript
js简单的弹出框有关闭按钮
May 05 Javascript
JQuery拖动表头边框线调整表格列宽效果代码
Sep 10 Javascript
JQuery仿小米手机抢购页面倒计时效果
Dec 16 Javascript
jQuery聚合函数实例
May 21 Javascript
浅析Bootstrip的select控件绑定数据的问题
May 10 Javascript
详解从Node.js的child_process模块来学习父子进程之间的通信
Mar 27 Javascript
ES6基础之解构赋值(destructuring assignment)
Feb 21 Javascript
详解vue中移动端自适应方案
May 05 Javascript
基于vue实现一个神奇的动态按钮效果
May 15 Javascript
详解JavaScript 事件流
Sep 02 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获取post中的json数据的实现方法
2011/06/08 PHP
如何设置mysql允许外网访问
2013/06/04 PHP
基于PHP输出缓存(output_buffering)的深入理解
2013/06/13 PHP
如何修改yii2.0自带的user表为其它的表
2017/08/01 PHP
javascript globalStorage类代码
2009/06/04 Javascript
动态加载外部javascript文件的函数代码分享
2011/07/28 Javascript
javascript中关于执行环境的杂谈
2011/08/14 Javascript
node.js中的fs.appendFileSync方法使用说明
2014/12/17 Javascript
JavaScript创建对象的方式小结(4种方式)
2015/12/17 Javascript
深入浅出ES6之let和const命令
2016/08/25 Javascript
数组Array的排序sort方法
2017/02/17 Javascript
让微信小程序支持ES6中Promise特性的方法详解
2017/06/13 Javascript
详解微信第三方小程序代开发
2017/06/23 Javascript
vue.js element-ui validate中代码不执行问题解决方法
2017/12/18 Javascript
angular json对象push到数组中的方法
2018/02/27 Javascript
详解vue的diff算法原理
2018/05/20 Javascript
JS加密插件CryptoJS实现AES加密操作示例
2018/08/16 Javascript
详解webpack 最简打包结果分析
2019/02/20 Javascript
layui 地区三级联动 form select 渲染的实例
2019/09/27 Javascript
easyUI 实现的后台分页与前台显示功能示例
2020/06/01 Javascript
用JavaScript实现贪吃蛇游戏
2020/10/23 Javascript
详解 Python 读写XML文件的实例
2017/08/02 Python
python监控linux内存并写入mongodb(推荐)
2017/09/11 Python
pandas中的series数据类型详解
2019/07/06 Python
html5 制作地图当前定位箭头的方法示例
2020/01/10 HTML / CSS
美国鞋类购物网站:Shiekh Shoes
2016/08/21 全球购物
Emporio Armani腕表天猫官方旗舰店:乔治·阿玛尼为年轻人设计的副线品牌
2017/07/02 全球购物
美国玩具公司:U.S.Toy
2018/05/19 全球购物
设计师大码女装:11 Honoré
2020/05/03 全球购物
给校长的建议书600字
2014/05/15 职场文书
项目经理岗位职责
2015/01/31 职场文书
2015年手术室工作总结
2015/05/11 职场文书
监护人证明
2015/06/19 职场文书
2019脱贫攻坚工作总结报告范本!
2019/08/06 职场文书
导游词之黄果树瀑布
2019/09/20 职场文书
SQL Server中使用判断语句(IF ELSE/CASE WHEN )案例
2021/07/07 SQL Server