通过 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 打包的小程序都不支持该方式