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是什么及应用的更多相关文章

  1. Vue mixins(混入)

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

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

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

  3. VUE mixins(混入)

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

  4. vue mixins的使用

    官网传送 刚开始接触vue的时候,官网关于mixins的例子看了好几遍,发现还是不会用,包括vuex也是后来慢慢理解一点的,不过和vuex比起来.mixns还是很好理解,简单很多了 就我目前理解mix ...

  5. Vue mixins extends extend components

    mixins 调用方式: mixins: [mixin1, mixin2] 是对父组件的扩充,包括methods.components.directive等... 触发钩子函数时,先调用mixins的 ...

  6. vue mixins应用场景

    学习知识得在应用场景中去应用,这样才能真正学到东西,记忆也深刻,以后碰到类似的东西就会了. 1.在assets文件夹下创建一个js文件 // 创建一个需要混入的对象 export const mixi ...

  7. 十、vue mixins 的用法

    vue中mixins个人理解就是定义一些公用的比较常用的方法,类似我们vue中将一些常用的组件也会抽离出来做成一个公共组件一样,只不过vue中mixins是定义的是法或者计算属性,然后将其混入(合并) ...

  8. Vue mixins extend

    const mixins = { created () { console.log('mixins created') } } const mixins2 = { created () { conso ...

  9. Vue Mixin 与微信小程序 Mixins 应用

    什么是Mixin(混入) Mixin是一种思想,用来实现代码高度可复用性,可以针对属性复制实现代码复用的想法进行一个扩展,就是混入(mixin).混入并不是复制一个完整的对象,而是从多个对象中复制出任 ...

随机推荐

  1. 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. ...

  2. 一个按权重(weight)进行LB的算法

    package netty; import com.google.common.collect.ImmutableList; import lombok.SneakyThrows; import ja ...

  3. Java基础 awt Frame 窗体的大小不可调

        JDK :OpenJDK-11      OS :CentOS 7.6.1810      IDE :Eclipse 2019‑03 typesetting :Markdown   code ...

  4. MOP tricks

    MOP tricks 开新坑,未完待续 觉得有用的话,欢迎一起讨论相互学习~Follow Me Reference [1] Multiobjective Immune Algorithm with N ...

  5. sql简单存储过程分享

    很多程序员朋友都视sql为洪湖水猛兽,其实深入分析一下,多用些时间与耐心,sql还是可以理解的. 本文主要是针对刚刚接触sql的新手朋友,进行一个sql存储过程的简单分享. 小子第一次发布文章,也是借 ...

  6. 定时杀死mysql中sleep的进程

    #!/bin/sh date=`date +%Y%m%d\[%H:%M:%S]` n=`mysqladmin -uroot -p** processlist | grep -i sleep | wc ...

  7. Emiya 家今天的饭

    \(dp_{i,j,k}\)表示前\(i\)种烹饪方法,假设最多的是食材\(j\),食材\(j\)比其他食材多\(k\)次出现 其中\(i \in [1,n],j \in [1,m],k \in [- ...

  8. CentOS7-Docker 安装 Gitlab

    官方教程 https://docs.gitlab.com/omnibus/docker/ 搜索镜像 [root@master ~]# docker search gitlab 拉取镜像 [root@m ...

  9. vue中ref在input中详解

    当我们在项目中遇见文本输入框的时候,获取时刻输入框中的值 1.v-model <template> <input type="text" v-model=&quo ...

  10. 以Unicode(UTF-16 LE)编码保存文本

    1. 以二进制方式打开文件,写入BOM头 FILE* pFile = nullptr; _wfopen_s(&pFile, szLogFilePath, L"wb"); / ...