<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` 方法来处理从子组件传递回来的事件，这是一个很好的实践。

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

相关问题

简写以下代码<el-tabs v-model="activeTab"> <el-tab-pane label="全部" name="first"> <div slot="label" @click="backright" style="width: 70px; text-align: center">全部</div> </el-tab-pane> <el-tab-pane label="本月" name="second"> <div slot="label" @click="backright" style="width: 70px; text-align: center">本月</div> </el-tab-pane> <el-tab-pane label="本学期" name="third"> <div slot="label" @click="backright" style="width: 70px; text-align: center">本学期</div> </el-tab-pane> <el-tab-pane label="自定义" name="fourth"> <div slot="label" @click="toggleLeft" style="width: 70px; text-align: center">自定义</div> </el-tab-pane></el-tabs>

以下是简写后的代码：

<el-tabs v-model="activeTab">
  <el-tab-pane label="全部" name="first" @click="backright">全部</el-tab-pane>
  <el-tab-pane label="本月" name="second" @click="backright">本月</el-tab-pane>
  <el-tab-pane label="本学期" name="third" @click="backright">本学期</el-tab-pane>
  <el-tab-pane label="自定义" name="fourth" @click="toggleLeft">自定义</el-tab-pane>
</el-tabs>

针对简写的细节说明：

1. 将 `click` 事件监听器移动到 `el-tab-pane` 标签上，使代码更加简洁。
2. 将 `div` 标签删除，将标签页的文本直接写在 `el-tab-pane` 标签中，使代码更加简洁易读。
3. 将 `style` 样式移动到 `style` 标签或者外部 CSS 文件中，使得代码更加简洁易维护。

<el-tab-pane label="全部" name="first" ><div slot="label" @click="backright" style="width: 70px; text-align: center" > 全部 </div></el-tab-pane > <el-tab-pane label="本月" name="second" ><div slot="label" @click="backright" style="width: 70px; text-align: center" > 本月 </div></el-tab-pane > <el-tab-pane label="本学期" name="third" ><div slot="label" @click="backright" style="width: 70px; text-align: center" > 本学期 </div></el-tab-pane > <el-tab-pane label="自定义" name="fourth" ><div slot="label" @click="toggleLeft" style="width: 70px; text-align: center" > 自定义 </div></el-tab-pane > </el-tabs> 优化以上代码

以下是优化后的代码：

<el-tabs v-model="activeTab">
  <el-tab-pane label="全部" name="first">
    <div slot="label" @click="backright" style="width: 70px; text-align: center">全部</div>
  </el-tab-pane>
  <el-tab-pane label="本月" name="second">
    <div slot="label" @click="backright" style="width: 70px; text-align: center">本月</div>
  </el-tab-pane>
  <el-tab-pane label="本学期" name="third">
    <div slot="label" @click="backright" style="width: 70px; text-align: center">本学期</div>
  </el-tab-pane>
  <el-tab-pane label="自定义" name="fourth">
    <div slot="label" @click="toggleLeft" style="width: 70px; text-align: center">自定义</div>
  </el-tab-pane>
</el-tabs>

针对优化的细节说明：

1. 将每个 `el-tab-pane` 标签都独立成一行，使代码更加清晰易懂。
2. 在 `el-tabs` 标签上添加 `v-model` 属性，使其能够实时绑定到当前选中的标签页。
3. 将 `div` 标签的 `slot` 属性移动到标签上，使得代码更加简洁。
4. 将 `style` 样式移动到 `style` 标签或者外部 CSS 文件中，使得代码更加简洁易维护。