关闭子组件并调用父组件的方法 handleExportList 进行导出操作时,等待导出操作完成后,调用子组件的回调方法 子:() => { this.exportBtnLoad = false; // 更新加载状态 } ==> 父:callback(),关闭子页面的导出按钮的加载状态
// ========== 父组件 ==========
<template>
<div>
<ChildComponent @exportlist="handleExportList" />
<p v-if="exportBtnLoad">导出中...</p>
<p v-else>导出完成!</p>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
exportBtnLoad: false // 按钮加载状态
};
},
methods: {
handleExportList(cloneHeaderlist, callback) {
console.log('接收到子组件的数据:', cloneHeaderlist);
// 模拟导出逻辑
setTimeout(() => {
console.log('模拟导出完成');
// 完成后调用回调
callback();
}, 2000); // 模拟2秒的异步操作
}
}
}
</script>
// ============= 子组件 ===========
<template>
<div>
<button @click="exportData">导出数据</button>
</div>
</template>
<script>
export default {
data() {
return {
cloneHeaderlist: [], // 导出信息
exportBtnLoad:false
};
},
methods: {
// 点击导出按钮
exportData() {
this.exportBtnLoad = true;
this.$emit('exportlist', this.cloneHeaderlist, () => {
this.exportBtnLoad = false; // 更新加载状态
});
}
}
}
</script>