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">javascript">
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 进行封装和复用。