add:添加插槽

src/components/DynamicComponent.vue

@@ -5,6 +5,11 @@
     <template v-for="child in componentChildren" :key="child.id">
       <DynamicComponent :component-data="child" />
     </template>
+
+    <template v-for="(slot,key, index) in componentSlots" :key="index" v-slot:[key]>
+      <DynamicComponent :component-data="slot" />
+    </template>
+
   </component>
 
 </template>
@@ -26,6 +31,8 @@ const componentChildren = computed(() => props.componentData?.children || []);
 const componentText = computed(() => props.componentData?.text || '');
 const componentClass = computed(() => props.componentData?.class || []);
 const componentStyle = computed(() => props.componentData?.style || []);
+const componentSlots = computed(() => props.componentData?.slots || []);
+
 
 
 </script>

src/components/TestComponent.vue

@@ -1,18 +1,29 @@
+<!-- DynamicSlotsComponent.vue -->
 <template>
-  <div class="my-component">
+  <div>
+    <!-- 动态插槽 -->
+
+    <div>
       <slot name="header"></slot>
-    <slot name="extra"></slot>
+    </div>
+
+    <div>
+      <slot name="main"></slot>
+    </div>
+    
+    <div>
+      <slot name="footer"></slot>
+    </div>
+
+
   </div>
 </template>
 
-<script>
+<script setup>
-export default {
+import { defineProps } from 'vue';
-  name: 'MyComponent',
-};
-</script>
 
-<style scoped>
+// 接收一个动态插槽名作为 prop
-.my-component {
+const props = defineProps({
-  /* 添加样式 */
+  dynamicSlotName: String
-}
+});
-</style>
+</script>

src/components/VueDemo.vue

@@ -1,5 +1,9 @@
 <template>
   <div>
+
+
+
+    
     <div style="display: flex;flex-direction: row;">
 
       <div ref="el2"
@@ -24,14 +28,20 @@
         {{ component.id }}
       </DynamicComponent>
     </div>
-    <TestComponent>
-      <template #header>
     <div>
-          header
+
-        </div>
+    <TestComponent >
+      <!-- 默认插槽内容 -->
+      <template #default>
+        Default slot content.
+      </template>
+      <!-- 动态插槽内容 -->
+      <template v-for="(slot, index) in dynamicSlotContents" :key="index" v-slot:[slot.slotName]>
+        {{ slot.content }}
       </template>
     </TestComponent>
   </div>
+  </div>
 
 
 </template>
@@ -41,16 +51,25 @@ import { onMounted, ref } from 'vue';
 import NestedFunction from './NestedFunction.vue';
 import DynamicComponent from './DynamicComponent.vue';
 
-import { useDraggable } from 'vue-draggable-plus'
+import { useDraggable } from 'vue-draggable-plus';
 import { uuid } from 'lsp-uuid';
 import { IComponent } from '../type/IComponent.ts';
 import { componentScheme } from '../schemes/scheme.ts';
 import TestComponent from './TestComponent.vue';
+
+const dynamicSlotContents = ref([
+  { slotName: 'header', content: 'Header content' },
+  { slotName: 'footer', content: 'Footer content' },
+  { slotName: 'main', content: 'Main content' }
+]);
+
+
 const componentsList = ref<any[]>([]);
 
-const list = ref<IComponent[]>([])
 
-const el2 = ref()
+const list = ref<IComponent[]>([]);
+
+const el2 = ref();
 
 
 onMounted(() => {
@@ -69,7 +88,7 @@ useDraggable(el2, componentsList, {
   onClone() {
     console.log('clone')
   },
-  clone(element: Record<'id' | 'name' | 'type' | 'children' | 'props' | 'text' | 'class' | 'style', any>) {
+  clone(element: Record<'id' | 'name' | 'type' | 'children' | 'props' | 'text' | 'class' | 'style'|'slots', any>) {
     return {
       id: `${element.id}-${uuid()}`,
       name: element.name,
@@ -81,7 +100,7 @@ useDraggable(el2, componentsList, {
       children: [],
       style: element.style,
       visible: "",
-      slots: {},
+      slots: element.slots,
       disable: "",
       events: {},
       loop: {},