Vue动态组件切换is

最新推荐文章于 2024-09-02 10:07:02 发布

云远12189

最新推荐文章于 2024-09-02 10:07:02 发布

阅读量310

点赞数 1

分类专栏： VUE 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_41575632/article/details/136335005

版权

VUE 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

<template>
  <!--Vue3使用is属性来切换组件-->
  <!--KeepAlive标签使组件间切换时被切换的表单值不丢失-->
  <KeepAlive>
    <component :is="currentTab"></component>
  </KeepAlive>
  <button @click="updateis">点击切换控件</button>
</template>
<script setup>
import classtest from "./components/classtest.vue";
import classtest2 from "./components/classtest2.vue";

import { ref, shallowRef } from "vue";
//因为切换组件有性能开销问题,所以使用shallowRef或markRaw
//不是用ref
let currentTab = shallowRef(classtest);

function updateis() {
  if (currentTab.value === classtest2) {
    console.log("classtest2");
    currentTab.value = classtest;
  } else {
    console.log("classtest");
    currentTab.value = classtest2;
  }
}
</script>
<style scoped>
</style>