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方法
原文地址:https://www.cnblogs.com/diantao/p/11434259.html
时间: 2024-10-06 00:22:23