使用vueuse在组件内复用模板
1. 安装vueusae
pnpm i @vueuse/core
2. 组件内复用模板
createReusableTemplate 是vueuse中的一个实用工具，用于在 Vue 3 中创建可重复使用的模板片段，同时保持状态的独立性。这对于需要在多个组件中重复使用相同的结构和逻辑时非常有用。
因为这些可复用的代码片段很少，所以抽离成一个单独的组件会有些不必要，比如需要同一种逻辑结构的表单项等。
这里简单举了一个用createReusableTemplate复用模板与传值的栗子：
<template><DefineTemplate v-slot="{ title, content }"><!--定义可复用内容 --><h3>{{ title }}</h3><div class="block">{{ content }}</div></DefineTemplate><!- 第一处复用 --><ReuseTemplate title="标题1" content="复用内容1" /><span> ----------------------------</span><ReuseTemplate title="标题2" content="复用内容2" />
</template>
<script setup lang="ts">
import { createReusableTemplate } from "@vueuse/core";const [DefineTemplate, ReuseTemplate] = createReusableTemplate();
</script>
<style scoped>
.block {width: 150px;height: 150px;background-color: aliceblue;display: grid;place-items: center;font-size: 18px;
}
</style>
注意：
<DefineTemplate>用于注册模板，但本身不渲染任何内容。<ReuseTemplate>则用来展示由<DefineTemplate>提供的模板。<DefineTemplate>必须在<ReuseTemplate>之前使用。
3. 使用场景
-
表单元素的复用： 如果你有一组表单元素（如输入框、下拉菜单等），并且这些元素在多个表单或多个组件中使用，createReusableTemplate 可以帮助你将这些表单元素封装为一个可复用的模板。
-
列表项的复用： 假设你有一个复杂的列表项结构，需要在多个地方使用，比如在主页的推荐列表和分类页的商品列表中。
-
弹窗内容的复用： 你可能需要在多个地方展示相同的弹窗内容，例如确认弹窗或表单弹窗。使用 createReusableTemplate，你可以确保弹窗的内容和逻辑只定义一次，但可以在多个地方复用。
-
可复用的布局结构： 如果你有一套通用的布局结构，例如卡片布局或者特定的网格布局，并且在多个组件中使用相同的结构，可以通过 createReusableTemplate 进行封装和复用。