vue3实现在某个div里面动态的切换页面

首先是动态的某个div里面切换内容

<template>
  <div class="app-container">
    <el-button @click="switchComponent('one')">登录</el-button>
    <el-button @click="switchComponent('two')">注册</el-button>

    <!--  动态切换的内容    -->
    <component :is="currentComponent.value" />
  </div>
</template>

<script setup>
import { shallowRef } from 'vue';
import OneComponent from '@/views/drawing/test/one';
import TwoComponent from '@/views/drawing/test/two';

const currentComponent = shallowRef(null);

const switchComponent = (componentName) => {
  if (componentName === 'one') {
    currentComponent.value = OneComponent;
  } else if (componentName === 'two') {
    currentComponent.value = TwoComponent;
  }
};
</script>

接下来在一个页面中给另一个页面传递值

第一个页面中通过emitComponentChange 方法传入参数
<script setup>
import one from '@/views/drawing/test/one';
import two from '@/views/drawing/test/two';

const activeIndex = ref('1');
const router = useRouter();

const handleSelect = (index) => {
  console.log('选中了选项:', index);
  activeIndex.value = index;

  if (index === '1'){
    console.log("基础数据");
    // 使用事件总线触发事件，传递组件名称或其他数据
    emitComponentChange(one);
  }
};

const emitComponentChange = (component) => {
  // 触发自定义事件，传递组件或其他数据
  const event = new CustomEvent('componentChange', { detail: component });
  window.dispatchEvent(event);
};
</script>

然后，在另一个页面中，可以使用 window.addEventListener 来捕获这个事件，并执行相应的操作
<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  window.addEventListener('componentChange', (event) => {
    const component = event.detail;
    // 在这里处理接收到的组件或其他数据
    console.log('收到组件变更事件:', component);
  });
});
</script>