前言
標簽頁組件，即實現選項卡切換，常用于平級內容的收納與展示。
因為每個標簽頁的內容是由使用組件的父級控制的，即這部分內容為一個 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 的初始化方法。新聞熱點
疑難解答
圖片精選
