vue3动态组件
<!-- 动态组件 --> <component :is="components.get(activeKey)" />
import { defineAsyncComponent, markRaw } from 'vue'; const components = markRaw(new Map<string, any>()); //组件1 components.set( 'index1', defineAsyncComponent(() => import('./components/table/index1.vue')), ); //组件2 components.set( 'index12', defineAsyncComponent(() => import('./components/table/index2.vue')), ); //后端返回数据 const carBarList = ref([ { name: '组件1', sign: 'index1', icon: 'icon-icon-hengxiangshijianzhou', }, { name: '组件2', sign: 'index2', icon: 'icon-wj-jdws', }, ]); //组件切换标识 const activeKey = ref(''); //组件选择 function tabSelect(item: { sign: string }) { activeKey.value = item.sign; }
//keep-alive钩子函数:组件被激活时调用 activated() { console.log('组件被激活'); }, //keep-alive钩子函数:组件消失,被缓存时调用 deactivated() { console.log('组件被缓存'); },
参考
https://blog.csdn.net/zhouoxinxin/article/details/126263418