vue动态组件is详解

tab动态切换三个组件

方法一可以使用v-if做一个隐藏显示

方法二用元素的 is 的特性

<component :is="currentView" class="table"></component>

<script>
import ThemeWork  from './components/themeWork'
import Banner  from './components/banner'
import Links  from './components/link'
export default {components: {ThemeWork,Banner,Links},data() {return {arr: ['Banner', 'ThemeWork', 'Links'],navList: [{ label: 0, value: '轮播设置' },{ label: 1, value: '作品集管理' },{ label: 2, value: '学习资源管理' }],activeIndex: 0,}},computed: {currentView() {return this.arr[this.activeIndex]}},methods: {// 切换handleNav(index) {this.activeIndex = index}}
}
</script>

缓存

上述讲到的方法虽然能够实现了动态组件的切换，但是每次切换都会把上一个组件销毁，然后渲染下一个组件，对于多次切换而言，显然每次的销毁和重新渲染，很大消耗了我们的性能。所以我们可以通过keep-alive对组件进行缓存，对于不显示的组件不是去销毁，而是处于不激活的状态，当需要显示时再激活。

keep-alive

两个属性include和exclude

include表示只能允许匹配到的组件生效
exclude则相反，除了匹配到的组件之外有效

<!-- 字符串 逗号分隔字符串， a，b 分别为组件名 -->
<keep-alive include="a,b"><component :is="currentView"></component>
</keep-alive>
<!-- 正则表达式 -->
<keep-alive :include="/a|b/"><component :is="currentView"></component>
</keep-alive>
<!-- 数组 -->
<keep-alive :include="['a', 'b']"><component :is="currentView"></component>
</keep-alive>

vue动态组件is详解相关推荐

php动态写入vue,Vue自定义动态组件使用详解
这次给大家带来Vue自定义动态组件使用详解,Vue自定义动态组件的注意事项有哪些,下面就是实战案例,一起来看一下. 现在基于vue的UI组件库有很多,比如iview,element-ui等.但有时候这 ...
ant design pro vue 动态路由流程详解
ant design pro vue 动态路由流程详解前言流程图流程1 src/permission.js 流程2 src/store/modules/user.js 流程3 src/perm ...
vue 父子组件通信详解
这是一篇详细讲解vue父子组件之间通信的文章,初始学习vue的时候,总是搞不清楚几个情况通过props在父子组件传值时,v-bind:data="data",props接收的到底 ...
vue父子组件通信详解
较容易理解的一篇博文: https://www.cnblogs.com/shengnan-2017/p/10419050.html.
Vue组件-Confirm详解
Vue组件-Confirm详解原作者:爱扎马尾的小狮子一.使用的地方引用,传入属性和方法在需要的地方引入组件,然后传入对应的属性和方法组件 <template> <div : ...
vue高级进阶( 二 ) 8种组件通信详解
猛兽总是独行,牛羊才成群结队. -------鲁迅 vue组件通信的重要性无需多言...但是你肯定没有全部掌握,所以这第二篇文章应运而生 props和$emit props父传子,$emit子传父,看 ...
vue组件component详解
vue组件component详解组件介绍组件: 组件是拥有一定功能多个html标签的集合体,是对html标签的封装. 好处: 模板中为了实现一个(例如分页)效果,需要绘制20个html标签 ...
数据列表多选 html,Vue多选列表组件深入详解
这篇文章主要介绍了Vue多选列表组件深入详解,这个是vue的基本组件,有需要的同学可以研究下多选列表 (Multi-Select) 是一种将所有选项列出,并允许用户利用 Ctrl/Shift 键进行 ...
delphi TWebBrowser组件使用详解
delphi TWebBrowser组件使用详解该组件是一个浏览器组件,可以显示一个指定地址的网页.设置网页打开时的主页以及对网页进行相关的操作,同时也可以对HTML文件进行剪切.复制.粘贴.删除等 ...