动态组件
让多个组件使用同一个<component></component>挂载点，并动态切换组件。
其具体实现是在一个多标签的界面中使用 is 属性来动态切换不同的组件，如：
|
1 2 |
<!--在component中使用is属性绑定组件--> <component v-bind:is="currentTabComponent"></component> |
动态组件具体实现如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<template> <div> <button @click="change">动态组件切换</button> <!--动态组件--> <component :is="currentComponent"></component> </div> </template> <script> export default { // 引入组件 components: { one: { template: "<div>组件1</div>" }, two: { template: "<div>组件2</div>" }, three: { template: "<div>组件3</div>" }, }, data: { index: 0, arr: ["one", "two", "three"], // 初始组件信息 currentComponent: "one", }, methods: { // 动态切换组件 change() { //取余 this.index = ++this.index % 3; //切换组件 this.currentComponent = this.arr[this.index]; }, }, } </script> |
条件判断组件动态加载
除了通过动态组件的形式实现组件的动态切换，也可以通过多条件判断的方式实现组件的切换，具体实现如下：
|
1 2 3 4 5 6 7 8 9 10 |
<!-- 多个条件判断的子组件 --> <template> <div> <button @click="change">动态组件切换</button> <!-- 多个条件判断的子组件 --> <one v-if="currentComponent == 'one'"></one> <two v-else-if="currentComponent == 'two'"></two> <threev-else></three> </div> </template> |
动态组件缓存
动态组件在组件之间切换的时候，会重复渲染组件的内容，但对于有些想保持组件状态的场景来说，会出现反复重渲染导致的性能问题。
为了解决切换时重新创建组件的问题，我们可以用一个 <keep-alive> 元素将动态组件包裹起来，实现页面组件的缓存效果，具体实现如下：
|
1 2 3 4 5 6 7 8 9 |
<template> <div> <button @click="change">动态组件切换</button> <!-- 失活的组件将会被缓存！--> <keep-alive> <component :is="currentComponent"></component> </keep-alive> </div> </template> |
<keep-alive> 元素会缓存不活动的组件实例，而不是销毁它们。
<keep-alive> 元素在多条件判断的子组件的应用如下：
|
1 2 3 4 5 6 7 8 9 10 11 |
<template> <div> <button @click="change">动态组件切换</button> <!-- 多个条件性的子元素 --> <keep-alive> <one v-if="currentComponent == 'one'"></one> <two v-else-if="currentComponent == 'two'"></two> <three v-else></three> </keep-alive> </div> </template> |
本文来自作者:爆点游戏社，不代表小新网立场！
转载请注明：https://www.xiaoxinys.cn/101855.html
相关推荐
-
河北雄安新区地图（雄安新区红色历史）
中国红色地图之三十、雄安（千年新区） 雄安新区，位于河北省中部，地处北京、天津、保定腹地。包括雄县、容城县、安新县三县及周边部分区域，起步区面积约100…
-
蓝琼缨年轻的照片，美艳动人的赌王二房
她是美艳动人的赌王二房，也是背负无数骂名的“蛇蝎美人”。 蓝琼缨与何鸿燊年轻时候 家道中落 嫁入豪门 蓝琼缨出生于一户大户人家，爷爷曾是民国高级军官，父亲则毕业于黄埔军校，为抗日战…
-
青春期发腮正常吗（女生青春期发腮怎么办）
来找老路咨询整形问题的不仅有50+、40+、30+岁的女性求美者，还有20岁左右的小姑娘，偶尔还会有＜18岁的小小姑娘。最近，有一位年仅14岁的小小姑娘问：“路医生，我发腮了，该怎…
-
沈阳香江家居，科技创新综合体运营方案
一.强化科技创新驱动 打造科技产业综合体 1.光控特斯联人工智能物联网产业基地 总投资200亿元，占地面积17.2万平方米，2025年建成光控特斯联东北区域总部、智能物联网研发创新…
-
冯唐愿历尽千帆归来仍少年原文
01 愿历尽千帆 归来仍是少年前一句是愿历尽千帆，出自现代诗人冯唐的《冯唐诗百首》。全诗为：尚未佩妥剑，转眼便江湖。愿历尽千帆，归来仍少年。 “愿历尽千帆，归来仍少年”出自现代诗人…
-
英伟达显卡排名天梯图系统之家
随着NVIDIA新一代“卡皇”RTX 3090Ti的正式上市，RTX30家族也宣告满员。近日，NVIDIA官方以视频形式推出了一份台式显卡游戏性能天梯图，这支视频涵盖了从GTX16…
-
御龙在天银子怎么赚，发家致富的好方法
勇闯御龙大陆必不可少的是什么？肯定会有玩家脱口而出：钱！小编今天要讲的就是通行御龙大陆的银两，此刻，不要说话，小编知道各位玩家想说的是什么。小编不讲绑银，这个很少有人缺少，绑银一般…
-
写杨贵妃的诗（杜甫写杨贵妃的诗句有哪些）
杨贵妃是唐代唐玄宗的妃子，也是中国古代四大美女之一。所谓“西施沉鱼，昭君落雁，貂蝉闭月，贵妃羞花”，四大美女各有各的悲欢离合。 杨贵妃和唐玄宗有过一段刻骨铭心的爱恋，奈何安史之乱爆…
-
国内闲时流量是啥，国内通用流量和国内闲时流量是什么意思？
今年的娱乐圈可谓是一波未平一波又起，诸多曾经混得风生水起的人物，如今都已跌落神坛，甚至还有的去吃了牢饭。 不管是顶流大咖还是年轻小花，只要他们的所作所为违背正能量，违背法律，最终都…
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。