使用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>

注意：

1. <DefineTemplate>用于注册模板，但本身不渲染任何内容。
2. <ReuseTemplate>则用来展示由<DefineTemplate>提供的模板。
3. <DefineTemplate>必须在<ReuseTemplate>之前使用。

3. 使用场景

1. 表单元素的复用： 如果你有一组表单元素（如输入框、下拉菜单等），并且这些元素在多个表单或多个组件中使用，createReusableTemplate 可以帮助你将这些表单元素封装为一个可复用的模板。

2. 列表项的复用： 假设你有一个复杂的列表项结构，需要在多个地方使用，比如在主页的推荐列表和分类页的商品列表中。

3. 弹窗内容的复用： 你可能需要在多个地方展示相同的弹窗内容，例如确认弹窗或表单弹窗。使用 createReusableTemplate，你可以确保弹窗的内容和逻辑只定义一次，但可以在多个地方复用。

4. 可复用的布局结构： 如果你有一套通用的布局结构，例如卡片布局或者特定的网格布局，并且在多个组件中使用相同的结构，可以通过 createReusableTemplate 进行封装和复用。