举个vue点击按钮异步加载tab组件并实时刷新数据的例子

可以使用Vue的动态组件和异步组件来实现异步加载tab组件并实时刷新数据的功能。具体实现方法如下：

1. 在父组件中定义一个数组，用于存储所有的tab组件的名称。

2. 在父组件中定义一个变量，用于存储当前选中的tab组件的名称。

3. 在父组件中使用v-for指令遍历tab组件的名称数组，生成对应的tab按钮，并绑定点击事件。

4. 在父组件中使用Vue的动态组件和异步组件，根据当前选中的tab组件的名称，动态加载对应的tab组件，并实时刷新数据。

下面是示例代码：

<template>
<div>
<div v-for="(tab, index) in tabs" :key="index" @click="selectTab(tab)">
{{ tab }}
</div>
<component :is="currentTab" :data="tabData" />
</div>
</template>

<script>
export default {
data() {
return {
tabs: ['Tab1', 'Tab2', 'Tab3'],
currentTab: 'Tab1',
tabData: null
}
},
methods: {
selectTab(tab) {
this.currentTab = tab
this.loadData()
},
loadData() {
// 异步加载数据
// ...
// 加载完成后更新数据
this.tabData = data
}
},
components: {
Tab1: () => import('./Tab1.vue'),
Tab2: () => import('./Tab2.vue'),
Tab3: () => import('./Tab3.vue')
}
}
</script>