From e7e5e7d1fab33124ee664a2b3d92bb73d53b44b4 Mon Sep 17 00:00:00 2001
From: dtechmaster <128112844+dtechmaster@users.noreply.github.com>
Date: Thu, 26 Sep 2024 16:47:06 +0900
Subject: [PATCH] Try to improve Dynamic Slot Names documentation

Propose explanation on how to declare Dynamic Slot Names and not only on how to use them.
---
 src/guide/components/slots.md | 93 ++++++++++++++++++++++++++++++-----
 1 file changed, 81 insertions(+), 12 deletions(-)

diff --git a/src/guide/components/slots.md b/src/guide/components/slots.md
index d3dfe83771..459daad473 100644
--- a/src/guide/components/slots.md
+++ b/src/guide/components/slots.md
@@ -327,22 +327,91 @@ When the header / footer / default is present we want to wrap them to provide ad
 
 ## Dynamic Slot Names {#dynamic-slot-names}
 
-[Dynamic directive arguments](/guide/essentials/template-syntax.md#dynamic-arguments) also work on `v-slot`, allowing the definition of dynamic slot names:
+Dynamic slot names in Vue allow you to create flexible components by generating slot names at runtime. This is particularly useful when your component's content structure depends on dynamic data.
 
-```vue-html
-<base-layout>
-  <template v-slot:[dynamicSlotName]>
-    ...
-  </template>
+### Declaring Dynamic Slots in the Child Component
 
-  <!-- with shorthand -->
-  <template #[dynamicSlotName]>
-    ...
-  </template>
-</base-layout>
+You can declare multiple dynamic slots by iterating over your data. For example, if you have an array of slot names, you can use the `v-for` directive to create a `<slot>` for each name in the array:
+
+```vue
+<!-- ChildComponent.vue -->
+<template>
+  <div>
+    <!-- Loop over slotNames to create dynamic slots -->
+    <div v-for="name in slotNames" :key="name">
+      <slot :name="name">
+        <!-- Fallback content -->
+        Default content for {{ name }}
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  slotNames: {
+    type: Array,
+    required: true,
+  },
+});
+</script>
 ```
 
-Do note the expression is subject to the [syntax constraints](/guide/essentials/template-syntax.md#dynamic-argument-syntax-constraints) of dynamic directive arguments.
+In this example:
+
+- **`slotNames` Prop**: An array of strings representing the names of the slots.
+- **Dynamic Slots**: The component uses `v-for` to create a `<slot>` for each name in `slotNames`.
+
+### Using Dynamic Slots in the Parent Component
+
+In the parent component, provide content for these dynamic slots using the `v-slot` directive with the slot names in a static or dynamic way:
+
+
+```vue
+<!-- ParentComponent.vue (Static way) -->
+<template>
+  <ChildComponent :slotNames="slotNames">
+    <!-- Provide content for 'header' slot -->
+    <template #header>
+      <h1>Header Content</h1>
+    </template>
+
+    <!-- Provide content for 'footer' slot -->
+    <template #footer>
+      <p>Footer Content</p>
+    </template>
+  </ChildComponent>
+</template>
+
+<script setup>
+import ChildComponent from './ChildComponent.vue';
+
+const slotNames = ['header', 'footer'];
+</script>
+```
+OR
+
+```vue
+<!-- ParentComponent.vue (Dynamic way) -->
+<template>
+  <ChildComponent :slotNames="slotNames">
+    <template v-for="name in slotNames" #[name]>
+      <h1>{{ name }} Content</h1>
+    </template>
+  </ChildComponent>
+</template>
+
+<script setup>
+import ChildComponent from './ChildComponent.vue';
+
+const slotNames = ['header', 'footer'];
+</script>
+```
+
+Here:
+
+- **Passing `slotNames`**: The parent passes an array `['header', 'footer']` to the child component.
+- **Providing Slot Content**: Uses the shorthand `#slotName` to provide content for each dynamic slot.
 
 ## Scoped Slots {#scoped-slots}