vue mixins是什么及应用
mixins是什么?
官网对此的解释比较文绉绉,通俗的理解很简单,就是提供功能抽象
如A,B,C 。。。Z等很多个页面用到同一个功能,此时的做法就应该把该功能抽象出来,mixins就是干这个的
当然,如果这个功能一个函数就能解决,就没必要这么干了,单独建个文件,专门放一些公用函数就行,mixins能干的比这大多了
上案例:
项目开发中,多个页面要查询数据详情,接口是一样的,但请求参数的不同返回结果也会不同,抽象该功能是最好的方法,以下是代码,具体接口请自行替换
import { fetchMemberReportDetail } from '@/api/memberReport' export default {
methods: {
memberReportDetail(queryObj, cb) {
fetchMemberReportDetail(queryObj).then(res => {
if(parseInt(res.status) === 200 && parseInt(res.data.error_code) === 0) {
cb && cb.call(this, res.data.data)
}else{
this.$message.error(res.data.error_msg)
}
}).catch(res => {
this.$message.error('网络异常,请稍后再试')
})
}
}
}
应用:
import memberReportDetail from '@/mixins/memberReport' export default {
name: "hdDetail",
mixins: [memberReportDetail],
data() {
return {
companyName: '',
memberType: ''
}
},
created() {
this.getMemberReportDetail()
},
methods: {
getMemberReportDetail() {
// 根据需要自行设置查询参数
const queryObj = {}
this.memberReportDetail(queryObj, this.setData)
},
setData(data) {
// 根据返回的数据接口自行设置
this.companyName = data.companyName
this.memberType = data.memberType
}
}
}
总结:
mixins适用于带有组件功能性质的抽象,组件具有的钩子函数,属性,它全有,而且组件还可以根据自身需要重写mixins方法
vue mixins是什么及应用的更多相关文章
- Vue mixins(混入)
建立一个公共组件,然后对该组件进行混入继承. 注意会走两个生命周期,谨慎使用 mixins混入,相当于生成new 组件:组件引用,相当与在父组件内开辟了一块单独的空间 mixins适用于,两个有非常相 ...
- _ 下划线 vue mixins 混入 变量前有下划线 变量不起作用
_ 下划线 vue mixins 混入 变量前有下划线 变量不起作用
- VUE mixins(混入)
mixins是在引入组件之后 将组件内部的内容如data等方法.method等属性与父组件相应内容进行合并 相当于在引入后 父组件的各种属性方法都被扩充了. 单纯组件引用: 父组件 ...
- vue mixins的使用
官网传送 刚开始接触vue的时候,官网关于mixins的例子看了好几遍,发现还是不会用,包括vuex也是后来慢慢理解一点的,不过和vuex比起来.mixns还是很好理解,简单很多了 就我目前理解mix ...
- Vue mixins extends extend components
mixins 调用方式: mixins: [mixin1, mixin2] 是对父组件的扩充,包括methods.components.directive等... 触发钩子函数时,先调用mixins的 ...
- vue mixins应用场景
学习知识得在应用场景中去应用,这样才能真正学到东西,记忆也深刻,以后碰到类似的东西就会了. 1.在assets文件夹下创建一个js文件 // 创建一个需要混入的对象 export const mixi ...
- 十、vue mixins 的用法
vue中mixins个人理解就是定义一些公用的比较常用的方法,类似我们vue中将一些常用的组件也会抽离出来做成一个公共组件一样,只不过vue中mixins是定义的是法或者计算属性,然后将其混入(合并) ...
- Vue mixins extend
const mixins = { created () { console.log('mixins created') } } const mixins2 = { created () { conso ...
- Vue Mixin 与微信小程序 Mixins 应用
什么是Mixin(混入) Mixin是一种思想,用来实现代码高度可复用性,可以针对属性复制实现代码复用的想法进行一个扩展,就是混入(mixin).混入并不是复制一个完整的对象,而是从多个对象中复制出任 ...
随机推荐
- ChannelEventRunnable handle RECEIVED operation error, channel is NettyChannel解决方法
[] 2019-11-23 16:17:40 [3673645] [c.a.d.r.t.d.ChannelEventRunnable]-[WARN] DubboServerHandler-10.20. ...
- 一个按权重(weight)进行LB的算法
package netty; import com.google.common.collect.ImmutableList; import lombok.SneakyThrows; import ja ...
- Java基础 awt Frame 窗体的大小不可调
JDK :OpenJDK-11 OS :CentOS 7.6.1810 IDE :Eclipse 2019‑03 typesetting :Markdown code ...
- MOP tricks
MOP tricks 开新坑,未完待续 觉得有用的话,欢迎一起讨论相互学习~Follow Me Reference [1] Multiobjective Immune Algorithm with N ...
- sql简单存储过程分享
很多程序员朋友都视sql为洪湖水猛兽,其实深入分析一下,多用些时间与耐心,sql还是可以理解的. 本文主要是针对刚刚接触sql的新手朋友,进行一个sql存储过程的简单分享. 小子第一次发布文章,也是借 ...
- 定时杀死mysql中sleep的进程
#!/bin/sh date=`date +%Y%m%d\[%H:%M:%S]` n=`mysqladmin -uroot -p** processlist | grep -i sleep | wc ...
- Emiya 家今天的饭
\(dp_{i,j,k}\)表示前\(i\)种烹饪方法,假设最多的是食材\(j\),食材\(j\)比其他食材多\(k\)次出现 其中\(i \in [1,n],j \in [1,m],k \in [- ...
- CentOS7-Docker 安装 Gitlab
官方教程 https://docs.gitlab.com/omnibus/docker/ 搜索镜像 [root@master ~]# docker search gitlab 拉取镜像 [root@m ...
- vue中ref在input中详解
当我们在项目中遇见文本输入框的时候,获取时刻输入框中的值 1.v-model <template> <input type="text" v-model=&quo ...
- 以Unicode(UTF-16 LE)编码保存文本
1. 以二进制方式打开文件,写入BOM头 FILE* pFile = nullptr; _wfopen_s(&pFile, szLogFilePath, L"wb"); / ...