vue mixins和extends的妙用
来源:互联网 发布:防化学气体口罩 知乎 编辑:程序博客网 时间:2024/05/21 19:30
写在前面
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 createdmixin1 createdmixin2 createdcreated
- 结论: 优先调用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和extend你可以理解为mvc的c(controller),这一层。可见通用的成员变量(包括属性和方法)抽象成为一个父类,提供给子类继承,这样可以让子类拥有一些通用成员变量,然而子类也可以重写父类的成员变量。这样的整个编程思想就很面向对象,也就是继承性。
- extends用来继承现成组件也非常的常用。可参考之前写过一篇:《基于element-ui实现table可配置化》,扩展element-ui的el-table-column组件。
作者:qfkobe
链接:https://juejin.im/post/5a38d222f265da4312810a76
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
阅读全文
0 0
- vue mixins和extends的妙用
- vue的mixins属性
- vue -- mixins
- vue-mixins使用注意事项和高级用法
- Vue——mixins
- VUE mixins 个人见解
- vue-mixins一些常用方法
- Vue.js Mixins 混入使用
- Vue中的mixins(混合)使用方法
- vue.js之mixins混合
- Vue computed计算属性的妙用
- Vue2 局部拓展extends 先于局部mixins执行
- Django基于类的编辑视图和Mixins
- extends和implements的区别
- java 的 extends 和implements
- extends 和 implements 的区别
- extends和implements的区别
- extends和implements的区别
- SpringBoot入门-8(使用properties进行配置)
- Jenkins入门系列之——01第一章 Jenkins是什么?
- java并发编程之synchronized关键字(五)
- Android
- 使用Spring 定时器 + selenium打卡
- vue mixins和extends的妙用
- 在RHEL7或CentOS7中修改创建账号时系统默认UID、GID最小起始值及其他设置
- QT5.7 搭建android环境
- 一文概述2017年深度学习NLP重大进展与趋势
- 除了数据还是数据?2018年5大 AI (人工智能)预测
- 深度学习发展简要笔记
- VideoVIew的简单使用
- LINUX_C编程实战—第十章《进程间的通信》-消息队列
- 2018最具就业前景的7大编程语言,Java、Python和JavaScript?