举个vue点击按钮异步加载tab组件的例子

可以的，你可以使用Vue的动态组件来实现异步加载tab组件。具体实现方式如下：

1. 在Vue组件中定义一个数组，用于存储所有需要异步加载的组件名称。

2. 在模板中使用v-for指令遍历数组，动态生成按钮，并绑定点击事件。

3. 在点击事件中，使用Vue的异步组件功能，动态加载对应的组件，并将其渲染到页面上。

下面是一个简单的示例代码：

<template>
<div>
<button v-for="tab in tabs" :key="tab" @click="loadTab(tab)">{{ tab }}</button>
<<!-- 这里使用动态组件来渲染异步加载的组件 -->
<component :is="currentTab"></component>
</div>
</template>

<script>
export default {
data() {
return {
tabs: ['Tab1', 'Tab2', 'Tab3'],
currentTab: null
}
},
methods: {
async loadTab(tab) {
// 使用Vue异步组件功能加载对应的组件
const component = await import(`@/components/${tab}.vue`)
// 将加载的组件名称保存到currentTab中，触发动态组件的重新渲染
this.currentTab = component.default || component
}
}
}
</script>