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. Springboot单元测试Junit深度实践

    Springboot单元测试Junit深度实践 前言 单元测试的好处估计大家也都知道了,但是大家可以发现在国内IT公司中真正推行单测的很少很少,一些大厂大部分也只是在核心产品推广单测来保障质量,今天这 ...

  2. 详解python3如何调用c语言代码

    本文链接:https://blog.csdn.net/u012247418/article/details/80170690开发环境linux: python3.5.2 + ubuntu-gnome- ...

  3. 001 okhttp3的POST使用

    继续使用上面的项目 1.被调用的项目 package com.jun.web2forokhttp.okhttp; import com.jun.web2forokhttp.bean.HttpDomai ...

  4. java捕获一个网站页面的全部图片

    直接上代码: package com.jeecg.util; import java.io.BufferedReader; import java.io.FileNotFoundException; ...

  5. Pytorch IO提速

    1. 把内存变成硬盘,把需要读的数据塞到里面去,加快了io. Optimizing PyTorch training code 如何给你PyTorch里的Dataloader打鸡血 轻轻松松为你的Li ...

  6. NODE_ENV=production 环境变量设置

    "start": "NODE_ENV=production node ./bin/www"

  7. [LeetCode] 330. Patching Array 数组补丁

    Given a sorted positive integer array nums and an integer n, add/patch elements to the array such th ...

  8. [LeetCode] 557. Reverse Words in a String III 翻转字符串中的单词 III

    Given a string, you need to reverse the order of characters in each word within a sentence while sti ...

  9. redis密码配置

    配置密码 重启密码会失效 配置在redis.conf中 requirepass test123,则重启不会失效

  10. H5混合开发中android终端和ios终端常见的兼容问题1

    转自 https://blog.csdn.net/xuehu837769474/article/details/80603898 1.安卓浏览器看背景图片,有些设备会模糊. 用同等比例的图片在PC机上 ...