详解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 相关文章推荐
利用js对象弹出一个层
Mar 26 Javascript
手机Web APP如何实现分享多平台功能
Aug 19 Javascript
AngularJS通过ng-route实现基本的路由功能实例详解
Dec 13 Javascript
使用bootstrap插件实现模态框效果
May 10 Javascript
BootStrap daterangepicker 双日历控件
Jun 02 Javascript
基于datepicker定义自己的angular时间组件的示例
Mar 14 Javascript
vue框架搭建之axios使用教程
Jul 11 Javascript
React实现全局组件的Toast轻提示效果
Sep 21 Javascript
JavaScript解析机制与闭包原理实例详解
Mar 08 Javascript
Vuex实现购物车小功能
Aug 17 Javascript
Vue+Element ui 根据后台返回数据设置动态表头操作
Sep 21 Javascript
在Vue中使用mockjs代码实例
Nov 25 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 excel类 phpExcel使用方法介绍
2010/08/21 PHP
Apache下禁止php文件被直接访问的解决方案
2013/04/25 PHP
PHP通过API获取手机号码归属地
2015/05/28 PHP
Thinkphp模板标签if和eq的区别和比较实例分析
2015/07/01 PHP
原生PHP实现导出csv格式Excel文件的方法示例【附源码下载】
2019/03/07 PHP
初学Javascript的一些总结
2008/11/03 Javascript
jQuery避免$符和其他JS库冲突的方法对比
2014/02/20 Javascript
JSON.parse()和JSON.stringify()使用介绍
2014/06/20 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
2015/01/13 Javascript
CSS图片响应式 垂直水平居中
2015/08/14 Javascript
全系IE支持Bootstrap的解决方法
2015/10/19 Javascript
详解js中class的多种函数封装方法
2016/01/03 Javascript
搞定immutable.js详细说明
2016/05/02 Javascript
JS实现太极旋转思路分析
2016/12/09 Javascript
从零学习node.js之搭建http服务器(二)
2017/02/21 Javascript
AngularJS表格添加序号的方法
2017/03/03 Javascript
基于JavaScript实现微信抢红包功能
2017/07/20 Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
2018/08/23 Javascript
VUE-cli3使用 svg-sprite-loader
2018/10/20 Javascript
Angular6新特性之Angular Material
2018/12/28 Javascript
vue 左滑删除功能的示例代码
2019/01/28 Javascript
layui 数据表格复选框实现单选功能的例子
2019/09/19 Javascript
Node.js API详解之 repl模块用法实例分析
2020/05/25 Javascript
windows 10下安装搭建django1.10.3和Apache2.4的方法
2017/04/05 Python
python实现3D地图可视化
2020/03/25 Python
使用tensorflow实现VGG网络,训练mnist数据集方式
2020/05/26 Python
python实现PDF中表格转化为Excel的方法
2020/06/16 Python
美国著名首饰网站:BaubleBar
2016/08/29 全球购物
柏林通行证:Berlin Pass
2018/04/11 全球购物
六一儿童节主持词
2014/03/21 职场文书
竞选班委演讲稿
2014/04/28 职场文书
幼儿园教师师德师风演讲稿:爱我所爱 无悔青春
2014/09/10 职场文书
2014迎接教师节演讲稿
2014/09/10 职场文书
信息与工商管理职业规划范文:为梦想而搏击
2014/09/11 职场文书
2019年汽车租赁合同范本!
2019/08/12 职场文书
Python基础之数据结构详解
2021/04/28 Python