标签：功能 chm highlight query 理解 created 结果 重写 this
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方法
标签：功能 chm highlight query 理解 created 结果 重写 this
原文地址：https://www.cnblogs.com/diantao/p/11434259.html
