<div class="pos-button">
<button
v-for="(item, index) in data"
:key="index"
class="pos-btn"
@click="selectactive(item)"
>
{{ item.name }}
</button>
</div>
动态组件
<keep-alive include="PullCom,PosCom">
<component :is="current.comName"></component>
</keep-alive>
在页面中引入组件
import PosCom from "../components/Position/PosCom.vue";
import PullCom from "../components/Position/PullCom.vue";
import { reactive } from "vue";
import { markRaw } from "vue";
const data = reactive([
{
name: "招聘中",
comName: markRaw(PosCom),
},
{
name: "已下架",
comName: markRaw(PullCom),
},
]);
// 设置默认选中
let current = reactive({
comName: data[0].comName,
});
const selectactive = (item) => {
current.comName = item.comName;
};