<template> <div id="app"> <el-tabs type="border-card"> <el-tab-pane :label='item' v-for="(item, index) in components" :key="index" @click="itemClick(item)"> <component :is="current" @homeClick="homeClick"></component> </el-tab-pane> </el-tabs> </div> </template> <script> import txst from './components/txst.vue' import pp from './components/pp.vue' import prab from './components/prab.vue' export default { components: { txst, pp, prab }, data() { return { components: ['txst', 'pp','prab'], current:'txst' } }, methods: { itemClick(tab){ this.current = tab }, homeClick(payload){ console.log("homeClick:", payload) } }, } </script> <style> </style>

你的代码看起来已经非常接近实现动态切换选项卡的功能了。在你的代码中，你使用了 Element UI 的 `<el-tabs>` 和 `<el-tab-pane>` 组件来实现选项卡的样式，并通过遍历 `components` 数组创建了对应的选项卡。

在 `<el-tab-pane>` 组件中，你使用了 `v-for` 指令遍历 `components` 数组，并将每个组件的名称作为 `label` 属性传递给选项卡，使用 `itemClick` 方法来处理选项卡点击事件。在 `<component>` 中，你使用了 `:is` 属性来动态绑定当前选中的组件。

你只需要在模板中添加对应的组件标签，并在 `components` 中引入相应的组件即可。例如，在模板中添加 `<txst>`、`<pp>` 和 `<prab>` 标签，并在 `components` 中引入 `txst.vue`、`pp.vue` 和 `prab.vue` 组件。

此外，你还定义了一个 `homeClick` 方法来处理从子组件传递回来的事件，这是一个很好的实践。

希望这个解答对你有帮助！如果还有其他问题，请随时提问。