父组件中的子组件 传参和方法优化
<div>
<SysDatasync :statisticsData="siteData" @refresh="handleRefresh('site')" />
<SysDatasync :statisticsData="equiData" @refresh="handleRefresh('equi')" />
<SysDatasync :statisticsData="warnData" @refresh="handleRefresh('warn')" />
<SysDatasync :statisticsData="userData" @refresh="handleRefresh('user')" />
<SysDatasync :statisticsData="orderData" refresh="handleRefresh('order')" />
</div>
方法:
import SysDatasync from '@/view/components/sys_datasync/index.vue'
export default {
components: {
SysDatasync
},
data() {
return {
siteData: {
title: '草莓',
action: '',
totaldata: '',
newdata: '',
time: ''
},
equiData: {
title: '桃子',
action: '',
totaldata: '',
newdata: '',
time: ''
},
warnData: {
title: '葡萄',
action: '',
totaldata: '',
newdata: '',
time: ''
},
userData: {
title: '芒果',
action: '',
totaldata: '',
newdata: '',
time: ''
},
orderData: {
title: '西瓜',
action: '',
totaldata: '',
newdata: '',
time: ''
}
}
},
mounted() {
this.fetchData(this.siteData, 2)
this.fetchData(this.equiData, 3)
this.fetchData(this.warnData, 5)
this.fetchData(this.userData, 1)
this.fetchData(this.orderData, 4)
},
methods: {
//这里封装好后可省去重复的代码
fetchData(dataObj, synctype) {
//接口可能需要不同的参数synctype
//拿到数据 data
dataObj.totaldata = data.totaldata
dataObj.newdata = data.newdata
},
//同步后刷新页面
handleRefresh(type) {
switch (type) {
case 'site':
this.fetchData(this.siteData, 2)
break
case 'equi':
this.fetchData(this.equiData, 3)
break
case 'warn':
this.fetchData(this.warnData, 5)
break
case 'user':
this.fetchData(this.userData, 1)
break
case 'order':
this.fetchData(this.orderData, 4)
break
}
}
}
}

被折叠的 条评论
为什么被折叠?



