十、vue mixins 的用法
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');
}
}
}
注意:
- 如果mixin里面有一个created,我们自己的组件里面也有一个created,代码执行是先执行mixin里面的再执行我们自己组件的created,换句话说就是把所有created中的逻辑合并,这里注意不能出现相同的逻辑,不然我们自己组件的就会覆盖掉mixin中的
- 对于methods,component如果里面都有相同的方法,我们自己的组件中的方法将会覆盖掉mixin中的方法。一切按照我们组件优先的原则
例如:
明白了吧?是不是很简单哦~~
十、vue mixins 的用法的更多相关文章
- Vue组件基础用法
前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...
- checkbox在vue中的用法小结
关于checkbox多选框是再常见不过的了,几乎很多地方都会用到,这两天在使用vue框架时需要用到checkbox多选功能,实在着实让我头疼,vue和原生checkbox用法不太一样,之前对于vue插 ...
- Vue mixins(混入)
建立一个公共组件,然后对该组件进行混入继承. 注意会走两个生命周期,谨慎使用 mixins混入,相当于生成new 组件:组件引用,相当与在父组件内开辟了一块单独的空间 mixins适用于,两个有非常相 ...
- checkbox在vue中的用法总结
前言 关于checkbox多选框是再常见不过的了,几乎很多地方都会用到,这两天在使用vue框架时需要用到checkbox多选功能,实在着实让我头疼,vue和原生checkbox用法不太一样, 之前对于 ...
- _ 下划线 vue mixins 混入 变量前有下划线 变量不起作用
_ 下划线 vue mixins 混入 变量前有下划线 变量不起作用
- OpenJDK源码研究笔记(十):枚举的高级用法,枚举实现接口,竟是别有洞天
在研究OpenJDK,Java编译器javac源码的过程中,发现以下代码. 顿时发现枚举类竟然也有如此"高端大气上档次"的用法. 沙场点兵(用法源码) com.sun.tools. ...
- UWP入门(十二)--数据绑定用法
原文:UWP入门(十二)--数据绑定用法 主要几个元素: Template DataTemplate ItemSource 数据绑定是一个数据提取的方法,能使数据和UI上的控件紧密相连,下面的Demo ...
- VUE mixins(混入)
mixins是在引入组件之后 将组件内部的内容如data等方法.method等属性与父组件相应内容进行合并 相当于在引入后 父组件的各种属性方法都被扩充了. 单纯组件引用: 父组件 ...
- Vue slot 插槽用法:自定义列表组件
Vue 框架的插槽(slot)功能相对于常用的 v-for, v-if 等指令使用频率少得多,但在实现可复用的自定义组件时十分有用.例如,如果经常使用前端组件库的话,就会经常看到类似的用法: < ...
随机推荐
- Springboot单元测试Junit深度实践
Springboot单元测试Junit深度实践 前言 单元测试的好处估计大家也都知道了,但是大家可以发现在国内IT公司中真正推行单测的很少很少,一些大厂大部分也只是在核心产品推广单测来保障质量,今天这 ...
- 详解python3如何调用c语言代码
本文链接:https://blog.csdn.net/u012247418/article/details/80170690开发环境linux: python3.5.2 + ubuntu-gnome- ...
- 001 okhttp3的POST使用
继续使用上面的项目 1.被调用的项目 package com.jun.web2forokhttp.okhttp; import com.jun.web2forokhttp.bean.HttpDomai ...
- java捕获一个网站页面的全部图片
直接上代码: package com.jeecg.util; import java.io.BufferedReader; import java.io.FileNotFoundException; ...
- Pytorch IO提速
1. 把内存变成硬盘,把需要读的数据塞到里面去,加快了io. Optimizing PyTorch training code 如何给你PyTorch里的Dataloader打鸡血 轻轻松松为你的Li ...
- NODE_ENV=production 环境变量设置
"start": "NODE_ENV=production node ./bin/www"
- [LeetCode] 330. Patching Array 数组补丁
Given a sorted positive integer array nums and an integer n, add/patch elements to the array such th ...
- [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 ...
- redis密码配置
配置密码 重启密码会失效 配置在redis.conf中 requirepass test123,则重启不会失效
- H5混合开发中android终端和ios终端常见的兼容问题1
转自 https://blog.csdn.net/xuehu837769474/article/details/80603898 1.安卓浏览器看背景图片,有些设备会模糊. 用同等比例的图片在PC机上 ...