vue3 动态组件实现 tab 切换

通过 vue3 的动态组件实现 tab 切换

<keep-alive>
    <component :is="currentTab.com" />
</keep-alive>

import componentA from './component/componentA/index'
import componentB from './component/componentB/index'
import { reactive, toRefs, markRaw } from 'vue';

const state = reactive({
  tabList: [{
      title: "组件一",
      com: markRaw(componentA),
  },{
      title: "组件二",
      com: markRaw(componentB),
  }],
})

const currentTab = reactive({
  com: state.tabList[0].com,
})

const { tabList } = toRefs(state)

// 切换tab
const changeTab = (index) => {
  currentTab.com = state.tabList[index].com;
}

注意：小程序和 uni-app 打包的小程序都不支持该方式