<template>
  <div class="folder-container">
    <component :is="currentComponent" v-bind="componentProps" />
  </div>
</template>

<script setup lang="ts">
import { ref, shallowRef, provide } from 'vue';
import ProjectComponent from './project.vue';

const currentComponent = shallowRef(ProjectComponent);
const componentProps = ref<any>({});

// 提供组件切换方法
const switchComponent = (component: any, props: any = {}) => {
  currentComponent.value = component;
  componentProps.value = props;
};

// 向子组件提供切换方法
provide('switchComponent', switchComponent);
</script>

<style scoped>
.folder-container {
  height: 100%;
}
</style>
