如何在Vue.js中实现一个详尽的标签页组件制作教程？

本文共计2589个文字，预计阅读时间需要11分钟。

前言+标签页组件，实现选项卡切换，常用于水平内容收集与展示。由于每个标签页的内容是由使用组件的父级控制的，这部分内容可以视为一个slot。

一般的设计方案是，在slot中放置内容。

前言

标签页组件，即实现选项卡切换，常用于平级内容的收纳与展示。

因为每个标签页的内容是由使用组件的父级控制的，即这部分内容为一个 slot。所以一般的设计方案是，在 slot 中定义多个 div，然后在接到切换消息时，再显示或隐藏相关的 div。这里面就把相关的交互逻辑也编写进来了，我们希望在组件中处理这些交互逻辑，slot 只单纯处理业务逻辑。这可以通过再定义一个 pane 组件来实现，pane 组件嵌在 tabs 组件中。

1 基础版

因为 tabs 组件中的标题是在 pane 组件中定义的，所以在初始化或者动态变化标题时，tabs 组件需要从 pane 组件中获取标题。