Vue.js中如何详细实现功能丰富的标签页组件？

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

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

前言

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

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

1 基础版

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