前言
标签页组件，即实现选项卡切换，常用于平级内容的收纳与展示。
因为每个标签页的内容是由使用组件的父级控制的，即这部分内容为一个 slot。所以一般的设计方案是，在 slot 中定义多个 div，然后在接到切换消息时，再显示或隐藏相关的 div。这里面就把相关的交互逻辑也编写进来了，我们希望在组件中处理这些交互逻辑，slot 只单纯处理业务逻辑。这可以通过再定义一个 pane 组件来实现，pane 组件嵌在 tabs 组件中。
1 基础版
因为 tabs 组件中的标题是在 pane 组件中定义的，所以在初始化或者动态变化标题时，tabs 组件需要从 pane 组件中获取标题。
html：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>标签页组件</title> <link rel="stylesheet" type="text/css" href="index.css"></head><body><div id="app" v-cloak> <tabs v-model="activeIndex"> <pane label="科技"> 火星疑似发现“外星人墓地”？至今无法解释 </pane> <pane label="体育"> 全美沸腾！湖人队4年1.2亿迎顶级后卫，詹姆斯：有他就能夺冠 </pane> <pane label="娱乐"> 阿米尔汗谈中国武侠 想拍印度版《鹿鼎记》 </pane> </tabs></div><script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script><script src="tabs.js"></script><script> var app = new Vue({ el: '#app', data: { activeIndex: 0 } });</script></body></html>pane 组件：
Vue.component('pane', { name: 'pane', template: '/ <div class="pane" v-show="isShow">/ <slot></slot>/ </div>/ ', props: { //标题 label: { type: String, default: '' } }, data: function () { return { //显示或隐藏 isShow: true } }, methods: { //通知父组件，更新标题 init() { this.$parent.init(); } }, watch: { //当 label 值发生变化时，更新标题 label() { this.init(); } }, //挂载时，更新标题 mounted() { this.init(); }});在 pane 组件中，我们做了以下设计：
因为 pane 组件需要控制标签页内容的显示与隐藏，所以我们在 data 中定义了一个 isShow，并用 v-show 指令来控制内容的显示或隐藏。当点击这个 pane 所对应的标签页标题时，它的 isShow 被设置为 true。 我们需要一个标识来识别不同的标签页标题，本示例用的是 pane 组件定义顺序的索引。 在 props 中定义了 label，用于存放标题。因为 label 可以动态变化，所以必须在挂载 pane 以及当 label 值发生变化（通过监听实现）时，通知父组件，重新初始化标题。因为 pane 是独立组件，所以这里使用了 this.$parent 来调用父组件 tabs 的初始化方法。新闻热点
疑难解答
图片精选
