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新增了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了。
热门文章
- 微信小程序“拍照识图”上线(63,957)
- YouTube评论翻译插件《油管评论翻译机》上线了(61,280)
- 基金助手--chrome浏览器插件(45,587)
- 拍照识别彩票结果在线工具(32,127)
- vue+tabs动态组件方案漫谈(26,600)
- 《油管评论翻译机》使用说明书(26,035)
- 网页打印插件Print.js(24,108)
- 自用YouTube抓取评论+翻译工具(23,591)
- YouTube评论导出免费在线工具(18,449)
- px转rem/vw方法小结(17,603)
大哥,方便加联系方式咨询您个问题吗?
大哥,我改了你的代码,你的默认展示首页不可关闭我改成可关闭后,为啥tabs关闭了。页面上还展示首页上的内容呢?
5年前的代码了,需要看你的代码是写的,可以邮件联系jie4038[AT]qq.com
大哥,我给你发邮箱啦,不知道你有没有收到。
大佬 你好 我想问一下结合路由使用呢?
看看这个是你要的吗:https://github.com/monster1935/vue-admin
谢谢大佬
关闭当前tab的时候,怎么让currentTab切换成前一个
如果你看过源码就会知道,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;
demo和源码怎么看呢
地址已修复,谢谢提醒。