vue中 组件中来回切换 相互覆盖

由于写项目的需要  需要在组件中来回切换组件 

思想就是 点击原来组件里的按钮 会使得原来的组件被替换的组件全部替换 

点击替换的组件里的按钮 又会让使得原来的组件恢复 把替换的组件全部覆盖

先是原来组件的代码

<template>
  <div>
    <div v-if="!showReplacement">
 <button class="poss" id="poss" @click="showReplacement = true">添加专业</button> 这个是按钮
//你的原来组件内容
   <div v-else class="replacement-wrapr">
      <ReplacementComponent />
    </div>
  </div>
</template>
<script>
import ReplacementComponent from '你的vue.vue';
import { data1, showReplacement } from '@/components/globel/glober';
</script>

glober里的代码

const showReplacement = false;

export { data1, showReplacement }; //data1可无视

替换组件

<template>
  <div>
    <Some v-if="!showReplacement">
 <button class="back" @click="showReplacement = !showReplacement">返回</button>
//你的内容
  </Some>
    <replacementComponent v-else />
  </div>
</template>
<script>
import { data1, showReplacement } from '@/components/globel/glober';
import { ref, defineAsyncComponent } from "vue"

//动态导入
const replacementComponent = defineAsyncComponent(() => {
  return import('./你的组件.vue');
})

export default {
 data() {
    return {
      showReplacement,
    };
  },
  components: {
    replacementComponent,
  },
}
</script>

由于语法原因 不允许相互引入 会导致一个问题嵌套循环 所以只能动态导入解决问题