vue tabs 动态组件

最新推荐文章于 2024-07-29 15:15:19 发布

weixin_34258078

最新推荐文章于 2024-07-29 15:15:19 发布

阅读量1.1k

点赞数

文章标签： javascript ui python ViewUI

原文链接：https://my.oschina.net/u/560237/blog/1837210

版权

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

转载于:https://my.oschina.net/u/560237/blog/1837210

关注