vue中mixins个人理解就是定义一些公用的比较常用的方法,类似我们vue中将一些常用的组件也会抽离出来做成一个公共组件一样,只不过vue中mixins是定义的是法或者计算属性,然后将其混入(合并)到各个组件中使用,方便管理与统一修改。下面举例一些简单的引用用于自己理解和记忆:

  • 先定义一个mixins
// 创建一个需要混入的对象
export const mixinHello = {
created() {
this.hello();
},
methods: {
hello() {
console.log('Hello');
}
}
};
  •  在自己的组件中使用
import {myMixin} from './../assets/js/mixin';
export default {
mixins:[myMixin],
name: 'test',
data () {
return {
msg: 'Welcome to Your project'
}
}
}

这样输出是结果是怎样的呢?

相当于我们自己的组件是这样子的:

export default {

    name: 'hello',
data () {
return {
msg: 'Welcome to Your project'
}
},
created() {
this.hello();
},
methods: {
hello() {
console.log('Hello');
}
}
}

注意:

  1. 如果mixin里面有一个created,我们自己的组件里面也有一个created,代码执行是先执行mixin里面的再执行我们自己组件的created,换句话说就是把所有created中的逻辑合并,这里注意不能出现相同的逻辑,不然我们自己组件的就会覆盖掉mixin中的
  2. 对于methods,component如果里面都有相同的方法,我们自己的组件中的方法将会覆盖掉mixin中的方法。一切按照我们组件优先的原则
例如:
 

明白了吧?是不是很简单哦~~

十、vue mixins 的用法的更多相关文章

  1. Vue组件基础用法

    前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...

  2. checkbox在vue中的用法小结

    关于checkbox多选框是再常见不过的了,几乎很多地方都会用到,这两天在使用vue框架时需要用到checkbox多选功能,实在着实让我头疼,vue和原生checkbox用法不太一样,之前对于vue插 ...

  3. Vue mixins(混入)

    建立一个公共组件,然后对该组件进行混入继承. 注意会走两个生命周期,谨慎使用 mixins混入,相当于生成new 组件:组件引用,相当与在父组件内开辟了一块单独的空间 mixins适用于,两个有非常相 ...

  4. checkbox在vue中的用法总结

    前言 关于checkbox多选框是再常见不过的了,几乎很多地方都会用到,这两天在使用vue框架时需要用到checkbox多选功能,实在着实让我头疼,vue和原生checkbox用法不太一样, 之前对于 ...

  5. _ 下划线 vue mixins 混入 变量前有下划线 变量不起作用

    _ 下划线 vue mixins 混入 变量前有下划线 变量不起作用

  6. OpenJDK源码研究笔记(十):枚举的高级用法,枚举实现接口,竟是别有洞天

    在研究OpenJDK,Java编译器javac源码的过程中,发现以下代码. 顿时发现枚举类竟然也有如此"高端大气上档次"的用法. 沙场点兵(用法源码) com.sun.tools. ...

  7. UWP入门(十二)--数据绑定用法

    原文:UWP入门(十二)--数据绑定用法 主要几个元素: Template DataTemplate ItemSource 数据绑定是一个数据提取的方法,能使数据和UI上的控件紧密相连,下面的Demo ...

  8. VUE mixins(混入)

    mixins是在引入组件之后 将组件内部的内容如data等方法.method等属性与父组件相应内容进行合并 相当于在引入后 父组件的各种属性方法都被扩充了. 单纯组件引用:           父组件 ...

  9. Vue slot 插槽用法:自定义列表组件

    Vue 框架的插槽(slot)功能相对于常用的 v-for, v-if 等指令使用频率少得多,但在实现可复用的自定义组件时十分有用.例如,如果经常使用前端组件库的话,就会经常看到类似的用法: < ...

随机推荐

  1. Redis采坑(一)——数据无法插入,内存溢出

    一.采坑背景 在最大数据分析的过程中,redis是被当做热数据的缓存库使用的,在某一天中,redis数据库热数据无法插入,此时数据量大概在100万左右,很是纠结,为什么不能插入?程序的错误,不可能,没 ...

  2. Predicting effects of noncoding variants with deep learning–based sequence model | 基于深度学习的序列模型预测非编码区变异的影响

    Predicting effects of noncoding variants with deep learning–based sequence model PDF Interpreting no ...

  3. SnowFlake分布式ID生成及反解析

    概述 分布式id生成算法的有很多种,Twitter的SnowFlake就是其中经典的一种,SnowFlake算法生成id的结果是一个64bit大小的整数,它的结构如下图: 1位,不用.二进制中最高位为 ...

  4. IDS,IPS,IPD

    什么是IDP - 百度文库https://wenku.baidu.com/view/c500cf35eefdc8d376ee3220.html

  5. [转]Maven 国内源配置(2019/2/14)

    原文地址:https://segmentfault.com/a/1190000018147680 新年开工后要开始新的项目,但是发现一些项目的依赖没有在阿里仓库Central或Public源之中,项目 ...

  6. 运维笔记--ubuntu安装指定版本的RabbitMQ

    场景描述: 日常开发or生产环境经常会需要安装指定版本的软件,出于和其他软件的配合兼容性,以及稳定性的考虑. 现在我们的需求是安装指定版本的RabbitMQ,版本号: 操作步骤: 注意事项: 异常处理 ...

  7. linux命令(11)环境变量:查看和添加环境变量

    linux 环境变量系统: 系统级别:/etc/profile./etc/bashrc/ ./etc/environment 用户级别:~/.profile.~/.bashrc. ~/.bash_pr ...

  8. Qt 图片缩放参数计算

    缩放图片 void VCImgWidget::wheelEvent(QWheelEvent *event) { ) { // 当滚轮远离使用者时 //ui->textEdit->zoomI ...

  9. Word模板生成PDF文件目录出现“错误!未定义书签!”的解决办法

    通过程序读取Word文档模板生成PDF时,所有目录的页码全部变为“错误!未定义书签!”,后来经过仔细研究,发现是“域”的问题. 解决办法:全选(Crtl+A),按下Crtl+F11,再打印或者另存为P ...

  10. Hadoop YARN:调度性能优化实践(转)

    https://tech.meituan.com/2019/08/01/hadoop-yarn-scheduling-performance-optimization-practice.html 文章 ...