From 7abfedfa1c842ce649b77a5bb6d6d6a4f3ea4f16 Mon Sep 17 00:00:00 2001
From: LCJ-MinYa <1049468118@qq.com>
Date: Fri, 8 Aug 2025 11:35:20 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=AC=AC=E4=B8=89=E6=96=B9=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E4=BA=8C=E6=AC=A1=E5=B0=81=E8=A3=85slot=E4=BC=A0?=
 =?UTF-8?q?=E9=80=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/modules/demo.ts                    |  4 +++
 .../demo/thirdCompWrap/components/myComp.vue  | 25 ++++++++++++++
 .../thirdCompWrap/components/myCompWrap.vue   | 10 ++++++
 .../thirdCompWrap/components/thirdComp.vue    | 21 ++++++++++++
 src/views/demo/thirdCompWrap/index.vue        | 34 +++++++++++++++++++
 5 files changed, 94 insertions(+)
 create mode 100644 src/views/demo/thirdCompWrap/components/myComp.vue
 create mode 100644 src/views/demo/thirdCompWrap/components/myCompWrap.vue
 create mode 100644 src/views/demo/thirdCompWrap/components/thirdComp.vue
 create mode 100644 src/views/demo/thirdCompWrap/index.vue

diff --git a/src/router/modules/demo.ts b/src/router/modules/demo.ts
index a15057e..b2157a1 100644
--- a/src/router/modules/demo.ts
+++ b/src/router/modules/demo.ts
@@ -106,6 +106,10 @@ const titleArr = [
         key: 'pullRefresh',
         title: '有弹性的下拉刷新',
     },
+    {
+        key: 'thirdCompWrap',
+        title: '第三方组件二次封装slot传递',
+    },
 ];
 
 // @/views/demo/**/*.vue
diff --git a/src/views/demo/thirdCompWrap/components/myComp.vue b/src/views/demo/thirdCompWrap/components/myComp.vue
new file mode 100644
index 0000000..a5ac225
--- /dev/null
+++ b/src/views/demo/thirdCompWrap/components/myComp.vue
@@ -0,0 +1,25 @@
+<template>
+    <thirdComp
+        headerText="我是header"
+        footerText="我是footer"
+        @doClick="handleClick"
+    >
+        <template v-slot:header>
+            <div>我是header传入的slot</div>
+        </template>
+        <template v-slot>
+            <div>我是main传入的slot</div>
+        </template>
+        <template v-slot:footer>
+            <div>我是footer传入的slot</div>
+        </template>
+    </thirdComp>
+</template>
+
+<script setup>
+import thirdComp from './thirdComp.vue';
+
+const handleClick = () => {
+    console.log('传递事件');
+};
+</script>
diff --git a/src/views/demo/thirdCompWrap/components/myCompWrap.vue b/src/views/demo/thirdCompWrap/components/myCompWrap.vue
new file mode 100644
index 0000000..fd2e0ef
--- /dev/null
+++ b/src/views/demo/thirdCompWrap/components/myCompWrap.vue
@@ -0,0 +1,10 @@
+<template>
+    <div class="text-center">我是二次封装组件加工处</div>
+    <!-- 这里是整个二次封装的精髓 -->
+    <component :is="h(thirdComp, $attrs, $slots)"></component>
+</template>
+
+<script setup>
+import { h } from 'vue';
+import thirdComp from './thirdComp.vue';
+</script>
diff --git a/src/views/demo/thirdCompWrap/components/thirdComp.vue b/src/views/demo/thirdCompWrap/components/thirdComp.vue
new file mode 100644
index 0000000..0dbe736
--- /dev/null
+++ b/src/views/demo/thirdCompWrap/components/thirdComp.vue
@@ -0,0 +1,21 @@
+<template>
+    <div class="flex flex-col text-center">
+        <header class="mb-5">
+            <span>{{ headerText }}</span>
+            <slot name="header"></slot>
+        </header>
+        <main class="mb-5">
+            <slot></slot>
+        </main>
+        <footer class="mb-5">
+            <span>{{ footerText }}</span>
+            <slot name="footer"></slot>
+        </footer>
+        <el-button @click="$emit('doClick')">点击执行</el-button>
+    </div>
+</template>
+
+<script setup>
+const props = defineProps(['headerText', 'footerText']);
+const emit = defineEmits(['doClick']);
+</script>
diff --git a/src/views/demo/thirdCompWrap/index.vue b/src/views/demo/thirdCompWrap/index.vue
new file mode 100644
index 0000000..99fd39a
--- /dev/null
+++ b/src/views/demo/thirdCompWrap/index.vue
@@ -0,0 +1,34 @@
+<template>
+    <div>
+        <el-card header="基础引用方法">
+            <MyComp></MyComp>
+        </el-card>
+        <br />
+        <el-card header="二次封装方法">
+            <myCompWrap
+                headerText="我是header"
+                footerText="我是footer"
+                @doClick="handleClick"
+            >
+                <template v-slot:header>
+                    <div>我是header传入的slot</div>
+                </template>
+                <template v-slot>
+                    <div>我是main传入的slot</div>
+                </template>
+                <template v-slot:footer>
+                    <div>我是footer传入的slot</div>
+                </template>
+            </myCompWrap>
+        </el-card>
+    </div>
+</template>
+
+<script setup>
+import MyComp from './components/myComp.vue';
+import myCompWrap from './components/myCompWrap.vue';
+
+const handleClick = () => {
+    console.log('二次封装传递事件');
+};
+</script>