vue3 动态组件

最新推荐文章于 2024-06-26 19:52:51 发布

ZDM_9999

最新推荐文章于 2024-06-26 19:52:51 发布

阅读量187

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/ZDM_9999/article/details/128263466

版权

<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;
};