add:添加插槽

src/components/TestComponent.vue

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