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