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了。