feat: 第三方组件二次封装slot传递

src/router/modules/demo.ts

@@ -106,6 +106,10 @@ const titleArr = [
         key: 'pullRefresh',
         title: '有弹性的下拉刷新',
     },
+    {
+        key: 'thirdCompWrap',
+        title: '第三方组件二次封装slot传递',
+    },
 ];
 
 // @/views/demo/**/*.vue

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>

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>

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>

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>