文章目录
- 一、vue中的动态组件是什么?有什么用?
- 二、使用demo
- 1.tab页签中的使用
- 2.模拟新闻页demo
- 三、用keep-alive包裹,保持状态
- 总结
一、vue中的动态组件是什么?有什么用?
动态组件指可以动态切换组件的显示和隐藏。
使用场景:比如,某些场景会需要在两个组件间来回切换,如Tab界面;再比如,新闻详情页,不确定要渲染的是图片相关组件还是文件相关组件,有可能都渲染或渲染其中一个或其中多个混合。不知道渲染什么类型的组件,可以用动态组件。
写法:
<component>
是组件的占位符- 通过is属性动态指定要渲染的组件名称
<component is ="要渲染的组件的名称"></component>
点击跳转动态组件的官网地址
二、使用demo
1.tab页签中的使用
代码如下(示例):
<template><el-tabsv-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
代码如下(示例):
<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>
组件强制被切换掉的组件仍然保持“存活”的状态。
<!-- currentTab 改变时组件也改变 --><keep-alive><component :is="tabs[currentTab]"></component></keep-alive>
总结
动态组件可以动态切换组件的显示与隐藏。
不知道渲染什么类型的组件,需要根据数据确定组件类型时,可以使用动态组件。