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. 启动服务器 SEVERE: Error configuring application listener of class org.springframework.web.context.ContextLoaderListener

    意思是spring.jar这个包在发布的时候没有被放入war.如果是maven管理的项目,可以看看这个项目的部署参数里有没有加入所有maven的包. 右键项目->Properties->D ...

  2. 前端js 爬取 获取网页

    1.存在问题 same origin policy(同源策略) 页面中的Javascript只能读取,访问同域的网页.这里需要注意的是,Javascript自身的域定义和它所在的网站没有任何关系,只和 ...

  3. git 比较实用的命令

    git 删除已经add 过的文件 使用 git rm 命令即可,有两种选择, 使用 git rm 命令即可,有两种选择, 一种是 git rm --cached "文件路径",不删 ...

  4. jQuery.validator.addMethod自定义验证方法

    在开发中用到了jQuery的validate控件,有时需要自定义验证方法.我们可以通过jQuery.validator.addMethod()来实现,下面是例子: <!DOCTYPE html ...

  5. 切换普通用户报 -bash: fork: retry: No child processes

    ssh 连接普通用户 报这个错误 -bash: fork: retry: No child processes 解决办法: 更改vi /etc/security/limits.d/20-nproc.c ...

  6. linux中安装cx_Oracle

    https://blog.csdn.net/w657395940/article/details/41144225 各种尝试都,最后 pip install cx-Oracle 成功导入

  7. 微信小程序 与后台交互----获取服务器时间

    index.wxml代码 <!--index.wxml--> <view class="container"> <text>{{date}}&l ...

  8. k8s 使用本地镜像的时候

    k8s默认会从远端拉取镜像,其配置参数imagePullPolicy为Always containers: - name: demo image: image imagePullPolicy: Nev ...

  9. Appcrawler 参数实战经验

    https://testerhome.com/topics/10574 https://yq.aliyun.com/articles/277985 https://github.com/sevenir ...

  10. 八、spring生命周期之BeanPostProcessor

    BeanPostProcessor我们一般称为Bean的后置处理器,它与我们前面介绍的InitialingBean.init-method等一样,都是在bean的初始化时被调用,具体的用法我们在举例中 ...