vue tabs 動態組件

1. 主要思路： 在Vue內置組件中，有個名叫component的組件，提供:is屬性用於決定渲染目標，並提供了keep-alive指令把切換過的組件保留到內存中，避免從新渲染。

<keep-alive>
    <component :is="currentTab"></component>
</keep-alive>

2. 路由控制： vue+tabs（單頁）, vue-router之類的基本用不上了，直接在母頁上導入組件，註冊到components上供動態調用便可。

import page1 from './page1.vue'
import page2 from './page2.vue'

... ...

components: {
   page1,page2
}

3. 數據結構： 需求是tabs從一個菜單(可能包含二級菜單)點擊生成，默認有一個tab永不關閉，其他每一個tab可關閉和單獨刷新等等。作法是建兩個數組(或對象)：一個存儲固定的菜單數據，另外一個空數組，存儲用戶添加的tab數據。注意vue中監聽對象或數組變化。 watch對象和數組

4. tab刷新問題  vue2新增了activated、deactivated等生命週期鉤子，用於監聽keep-alive狀態。
這樣就能夠監聽每一個tab得到焦點或者失焦狀態，以便知道在何時執行父組件傳過來的命令(如關閉和刷新)。

5. 通信  v-on和$emit，子組件觸發$emit，在父組件中可用v-on監聽到。更復雜的組件間通訊，就須要使用vuex了。