From 15908d0543ae9f1f4d6b3aff8e30ba8327e12f49 Mon Sep 17 00:00:00 2001
From: LCJ-MinYa <1049468118@qq.com>
Date: Fri, 1 Aug 2025 17:59:47 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=9C=A8=E5=8D=95=E4=B8=80vue=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E5=86=85=E5=AE=9E=E7=8E=B0=E6=A8=A1=E6=9D=BF=E5=A4=8D?=
 =?UTF-8?q?=E7=94=A8=EF=BC=88=E9=9D=9Ejsx=E7=89=88=E6=9C=AC=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/modules/demo.ts                    |  4 +
 src/views/demo/templateReuse/index.js         | 29 ++++++
 src/views/demo/templateReuse/index.vue        | 90 +++++++++++++++++++
 src/views/demo/templateReuse/templateReuse.md | 71 +++++++++++++++
 4 files changed, 194 insertions(+)
 create mode 100644 src/views/demo/templateReuse/index.js
 create mode 100644 src/views/demo/templateReuse/index.vue
 create mode 100644 src/views/demo/templateReuse/templateReuse.md

diff --git a/src/router/modules/demo.ts b/src/router/modules/demo.ts
index f2613b7..fe04669 100644
--- a/src/router/modules/demo.ts
+++ b/src/router/modules/demo.ts
@@ -98,6 +98,10 @@ const titleArr = [
         key: 'reg',
         title: '正则表达式',
     },
+    {
+        key: 'templateReuse',
+        title: '在单一vue组件内实现模板复用（非jsx版本）',
+    },
 ];
 
 // @/views/demo/**/*.vue
diff --git a/src/views/demo/templateReuse/index.js b/src/views/demo/templateReuse/index.js
new file mode 100644
index 0000000..87cd315
--- /dev/null
+++ b/src/views/demo/templateReuse/index.js
@@ -0,0 +1,29 @@
+export function creatTemplateReuse() {
+    let render = [];
+
+    const DefineTemplate = {
+        setup(_, { slots }) {
+            console.log(slots);
+            // render = slots.default;
+            for (let key in slots) {
+                render.push({
+                    slotName: key,
+                    render: slots[key],
+                });
+            }
+            return () => {};
+        },
+    };
+
+    const useTemplate = (props) => {
+        console.log(props);
+        let renderList = [];
+        props.slotName.forEach((name) => {
+            let chooseItem = render.find((item) => item.slotName === name);
+            renderList.push(chooseItem.render(props));
+        });
+        return renderList;
+    };
+
+    return [DefineTemplate, useTemplate];
+}
diff --git a/src/views/demo/templateReuse/index.vue b/src/views/demo/templateReuse/index.vue
new file mode 100644
index 0000000..985063b
--- /dev/null
+++ b/src/views/demo/templateReuse/index.vue
@@ -0,0 +1,90 @@
+<template>
+    <div
+        class="markdown-body"
+        v-html="htmlStr"
+    />
+
+    <div class="wrap">
+        <DefineTemplate v-slot:default="{ title, content, onFoo }">
+            <!-- 方法可以直接使用script中的，写法: @click="doClick" -->
+            <div
+                class="box"
+                @click="onFoo()"
+            >
+                <p>{{ title }}</p>
+                <p>{{ content }}</p>
+            </div>
+        </DefineTemplate>
+        <DefineTemplate>
+            <template v-slot:header="{ title, content, onFoo }">
+                <div
+                    class="box"
+                    @click="onFoo()"
+                >
+                    <p>{{ title }}: header</p>
+                    <p>{{ content }}</p>
+                </div>
+            </template>
+            <template v-slot:footer="{ title, content, onFoo }">
+                <div
+                    class="box"
+                    @click="onFoo()"
+                >
+                    <p>{{ title }}: footer</p>
+                    <p>{{ content }}</p>
+                </div>
+            </template>
+        </DefineTemplate>
+        <useTemplate
+            title="我是默认插槽模板"
+            content="默认插槽模板内容"
+            @foo="doClick"
+            :slotName="['default']"
+        ></useTemplate>
+        <useTemplate
+            title="我是包含header和footer的插槽模板"
+            content="包含header和footer的插槽模板内容"
+            @foo="doClick"
+            :slotName="['header', 'footer']"
+        ></useTemplate>
+        <!-- <div class="box">
+        <p>标题一</p >
+        <p>内容一</p >
+    </div>
+    <div class="box">
+        <p>标题二</p >
+        <p>内容二</p >
+    </div> -->
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { marked } from 'marked';
+import { getMarkdownContent } from '@/utils/tools';
+
+const htmlStr = ref('');
+
+getMarkdownContent('./md/templateReuse.md').then((res) => {
+    htmlStr.value = marked(res);
+});
+
+/** 定义模板demo */
+import { creatTemplateReuse } from './index';
+const [DefineTemplate, useTemplate] = creatTemplateReuse();
+
+const doClick = () => {
+    console.log('我是点击事件');
+};
+</script>
+
+<style scoped>
+.wrap {
+    display: flex;
+}
+.box {
+    width: 200px;
+    background: #e1e1e1;
+    margin-right: 50px;
+}
+</style>
diff --git a/src/views/demo/templateReuse/templateReuse.md b/src/views/demo/templateReuse/templateReuse.md
new file mode 100644
index 0000000..29f4f73
--- /dev/null
+++ b/src/views/demo/templateReuse/templateReuse.md
@@ -0,0 +1,71 @@
+## 在单一vue组件内实现模板复用（非jsx版本）
+
+关联文章，[使用jsx](/#/demo/jsx)
+
+### 注意事项
+* `定义的模版必须放置在使用之前，遵循代码执行顺序`
+* `复杂版本将render渲染的slot存为了一个数组，使用的时候必须传入数组类型的slotName，这样在使用useTemplate函数时才知道该渲染哪个模版`
+* `简单版本可以直接v-slot，默认使用defalut`
+
+### 简单版本源代码
+```vue
+<template>
+    <DefineTemplate v-slot="{ title, content, onFoo }">
+        <!-- 方法可以直接使用script中的，写法: @click="doClick" -->
+        <div class="box" @click="onFoo()">
+            <p>{{ title }}</p >
+            <p>{{ content }}</p >
+        </div>
+    </DefineTemplate>
+    <useTemplate title="标题一" content="内容一" @foo="doClick"></useTemplate>
+    <useTemplate title="标题二" content="内容二" @foo="doClick"></useTemplate>
+    <!-- <div class="box">
+        <p>标题一</p >
+        <p>内容一</p >
+    </div>
+    <div class="box">
+        <p>标题二</p >
+        <p>内容二</p >
+    </div> -->
+</template>
+
+<script setup>
+import { creatTemplateReuse } from "./index";
+const [DefineTemplate, useTemplate] = creatTemplateReuse();
+
+const doClick = () => {
+    console.log("我是标题一点击");
+};
+</script>
+
+<style scoped>
+.box {
+    width: 100px;
+    height: 100px;
+    background: #e1e1e1;
+    margin-right: 50px;
+}
+</style>
+```
+
+```javascript
+export function creatTemplateReuse() {
+    let render;
+
+    const DefineTemplate = {
+        setup(_, { slots }) {
+            console.log(slots);
+            render = slots.default;
+            return () => {};
+        },
+    };
+
+    const useTemplate = (props) => {
+        return render(props);
+    };
+
+    return [DefineTemplate, useTemplate];
+}
+```
+
+## 下面是复杂模版的效果，代码请查看vue文件
\ No newline at end of file