vue 循环tabs 标签页 组件_vue+tabs动态组件方案漫谈

这是一篇枯燥的笔记，很可能最后还没有demo demo地址。

Tabs标签页大家应该很熟悉了，特别是在jQuery盛行时代，内容可以高效地集中。如果使用vue这种自身就偏单页应用的框架，如何实现tabs动态加载所需页面呢？

以下是我在实现过程中遇到的问题，供参考。

1. 核心方法是什么?

在Vue内置组件中，有个名叫component的组件，提供:is属性用于决定渲染目标，并提供了keep-alive指令把切换过的组件保留到内存中，避免重新渲染。

参考：https://cn.vuejs.org/v2/guide/components.html#动态组件

2.路由怎么控制?

由于是vue+tabs(SPA中的SPA), vue-router之类的基本用不上了，直接在母页上导入组件，注册到components上供动态调用即可。import page1 from './page1.vue'

import page2 from './page2.vue'

... ...

components: {

page1,page2

}

3.数据结构怎样设计?

我的需求是tabs从一个菜单(可能包含二级菜单)点击生成，默认有一个tab永不关闭，其余每个tab可关闭和单独刷新等等。我的做法是建两个数组(或对象)：一个存储固定的菜单数据，另一个空数组，存储用户添加的tab数据。注意vue中监听对象或数组变化有坑。这里涉及具体逻辑，就不啰嗦了，有兴趣可以看看源码。

4.每个tab单独刷新问题

vue2新增了activated、deactivated等生命周期钩子(不理解为什么要取‘钩子’这么奇怪的名字)，用于监听keep-alive状态。

这样就可以监听每个tab获得焦点或者失焦状态，以便知道在什么时候执行父组件传过来的命令(如关闭和刷新)。

有了事件触发机制，现在就差知道到底执行什么命令了，我给component添加了自定义属性:refresh,当达到刷新条件时，通过props传给子组件，子组件得到refresh进行判断，决定是否刷新(刷新不要location.reload,这会让整个web刷新,要根据子页面逻辑重新初始化数据和请求接口。这方法比较笨拙，但我没发现官方api提供了想关方法，希望你有更好的处理方式)。

5.在tab中打开新tab

vue2虽然废除了$dispatch 和 $broadcast，但为组件间的通信提供了v-on和$emit，子组件触发$emit，在父组件中可用v-on监听到。更复杂的组件间通信，就需要使用vuex了。

以上总结有错误之处请指正。

最后奉上 git源码 和 Demo地址