父子组件传值，接收回调函数

关闭子组件并调用父组件的方法 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>