什么是动态组件以及使用场景

文章目录


一、vue中的动态组件是什么?有什么用?

动态组件指可以动态切换组件的显示和隐藏。

使用场景:比如,某些场景会需要在两个组件间来回切换,如Tab界面;再比如,新闻详情页,不确定要渲染的是图片相关组件还是文件相关组件,有可能都渲染或渲染其中一个或其中多个混合。不知道渲染什么类型的组件,可以用动态组件。

写法:

二、使用demo

1.tab页签中的使用

代码如下(示例):

javascript 复制代码
<template>
	<el-tabs
      v-model="activeName"
      @tab-click="handleClick"
    >
     <el-tab-pane label="页签1" name="组件1">页签1</el-tab-pane>
     <el-tab-pane label="页签2" name="组件2">页签2</el-tab-pane>
    </kui-tabs>
    <keep-alive>
    	<!-- 动态组件 -->
    	<component :is="组件1"></component>
    </keep-alive>
</template>
<script setup>
	import 组件1 from './组件1.vue'
	import 组件2 from './组件2.vue'
// ....
	activeName = '页签1'
	handleClick(tab) {
		this.activeName = tab.name;
	}
</script>

2.模拟新闻页demo

代码如下(示例):

javascript 复制代码
<template>
	<div>
		<!-- 动态组件 -->
        <div v-for="(val, key) in newsData" :key="key">
        	<component :is="val.type" :data="val.data"/>
        </div>
	</div>
</template>
<script>
	import text form './text.vue'
	import img from './img.vue'
	...
	export default {
		...
		data() {
			return {
				newsData: [
					{type: 'text', data:[]},
					{type: 'img', data:[]},
					...
				]
			}
		}
	}
</script>

三、用keep-alive包裹,保持状态

当使用<component :is="..."> 来在多个组件间作切换时,被切换掉的组件会被卸载。我们可以通过<KeepAlive>组件强制被切换掉的组件仍然保持"存活"的状态。

javascript 复制代码
<!-- currentTab 改变时组件也改变 -->
  <keep-alive>
	<component :is="tabs[currentTab]"></component>
  </keep-alive>

总结

动态组件可以动态切换组件的显示与隐藏。

不知道渲染什么类型的组件,需要根据数据确定组件类型时,可以使用动态组件。

相关推荐
yaoganjili2 分钟前
用 Tinymce 打造智能写作
前端
angelQ10 分钟前
Vue 3 中 ref 获取 scrollHeight 属性为 undefined 问题定位
前端·javascript
Dontla17 分钟前
(临时解决)Chrome调试避免跳入第三方源码(设置Blackbox Scripts、将目录添加到忽略列表、向忽略列表添加脚本)
前端·chrome
我的div丢了肿么办24 分钟前
js函数声明和函数表达式的理解
前端·javascript·vue.js
AAA阿giao27 分钟前
JavaScript 对象字面量与代理模式:用“胡巴送花”讲透面向对象与设计思想
javascript
云中雾丽27 分钟前
React.forwardRef 实战代码示例
前端
朝歌青年说27 分钟前
一个在多年的技术债项目中写出来的miniHMR热更新工具
前端
高台树色28 分钟前
终于记住Javascript垃圾回收机制
javascript
武天28 分钟前
一个项目有多个后端地址,每个后端地址的请求拦截器和响应拦截器都不一样,该怎么封装
vue.js
Moonbit30 分钟前
倒计时 2 天|Meetup 议题已公开,Copilot 月卡等你来拿!
前端·后端