vue+tabs动态组件方案漫谈

2017-06-30 | 26,600浏览 | 11评论 | 标签:tabs

vue+tabs动态组件方案漫谈

这是一篇枯燥的笔记,很可能最后还没有demo demo地址
Tabs标签页大家应该很熟悉了,特别是在jQuery盛行时代,内容可以高效地集中。如果使用vue这种自身就偏单页应用的框架,如何实现tabs动态加载所需页面呢?

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

1. 核心方法是什么?

在Vue内置组件中,有个名叫component的组件,提供:is属性用于决定渲染目标,并提供了keep-alive指令把切换过的组件保留到内存中,避免重新渲染。
参考:https://cn.vuejs.org/v2/guide/components.html#动态组件

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

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新增了activateddeactivated等生命周期钩子(不理解为什么要取‘钩子’这么奇怪的名字),用于监听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地址

(本篇完。有疑问欢迎留言探讨)

已有 11 条评论

  1. 敲代码的小王

    大哥,方便加联系方式咨询您个问题吗?

  2. 敲代码的小王

    大哥,我改了你的代码,你的默认展示首页不可关闭我改成可关闭后,为啥tabs关闭了。页面上还展示首页上的内容呢?

    1. DH

      5年前的代码了,需要看你的代码是写的,可以邮件联系jie4038[AT]qq.com

      1. 敲代码的小王

        大哥,我给你发邮箱啦,不知道你有没有收到。

  3. ssl

    大佬 你好 我想问一下结合路由使用呢?

    1. DH

      看看这个是你要的吗:https://github.com/monster1935/vue-admin

      1. ssl

        谢谢大佬

  4. 关闭当前tab的时候,怎么让currentTab切换成前一个

    1. DH

      如果你看过源码就会知道,tabItems即打开的tab,而currentTab即为当前显示的tab。遍历tabItems找出最后一个值,赋给currentTab即可。我之前统一设置currentTab为第1个。
      你可以在closeTab()相应位置加上:
      let lastItem;
      for(let i in this.tabItems){
      if(this.tabItems[i].label){
      lastItem=i;
      }
      }
      this.currentTab = lastItem;

  5. 00

    demo和源码怎么看呢

    1. DH

      地址已修复,谢谢提醒。

留言:

*

* (方便回复通知)

打赏
编辑代码 运行结果
退出