使用vueuse在组件内复用模板

devtools/2024/11/14 12:36:07/

1. 安装vueusae

pnpm i @vueuse/core

2. 组件内复用模板

createReusableTemplatevueuse中的一个实用工具,用于在 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>

在这里插入图片描述

注意:

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

3. 使用场景

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

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

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

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


http://www.ppmy.cn/devtools/102259.html

相关文章

无人机及固定机巢自动化控制软件技术详解

随着科技的飞速发展&#xff0c;无人机技术已成为众多行业中不可或缺的一部分&#xff0c;特别是在航拍、环境监测、农业植保、应急救援等领域展现出巨大潜力。无人机及固定机巢自动化控制软件作为支撑无人机高效、安全、自主运行的核心&#xff0c;集成了先进的系统架构、飞行…

React 入门第四天:理解React中的路由与导航

在React学习的第四天&#xff0c;我将目光聚焦在React Router上。路由是任何单页应用&#xff08;SPA&#xff09;的核心部分&#xff0c;决定了用户如何在应用中导航&#xff0c;以及不同URL对应的内容如何渲染。通过学习React Router&#xff0c;我体会到了React处理路由的强…

打手机检测算法源码样本展示打手机检测算法实际应用场景介绍

打手机检测算法是一种利用计算机视觉技术来监测和识别人们在特定区域如驾驶舱、考场或其他敏感区域非法使用手机的行为。这种算法对于提高安全性和确保规则的遵守具有重要意义。以下是关于打手机检测算法源码及其实际应用的详细阐述&#xff1a; 1. 算法实现 - 深度学习框架&a…

【生活英语】2、喜欢与讨厌

【生活英语】2、喜欢与讨厌 一、喜欢二、不喜欢三、英语对话 一、喜欢 1、I like it very much. I like it a lot. I love it. 2、I’m very fond of him. I’m fond of music. Are you into surfing? be into doing / sth. 对…感兴趣&#xff1b;极其喜欢 3、That’s my fa…

第六届土木工程、环境资源与能源材料国际学术会议(CCESEM 2024,10月18-20)

第六届土木工程、环境资源与能源材料国际学术会议&#xff08;CCESEM 2024&#xff09;&#xff0c;将于2024年10月18日至20日在广州举行。 会议主要围绕“土木工程”、“环境资源”、“能源材料”等研究领域展开讨论&#xff0c;并将邀请著名专家就土木、能源与环境研究做专题…

出现Property ‘sqlSessionFactory‘ or ‘sqlSessionTemplate‘ are requiredProperty报错

目录&#xff1a; bug Property ‘sqlSessionFactory‘ or ‘sqlSessionTemplate‘ are requiredProperty报错解决方法 bug Property ‘sqlSessionFactory‘ or ‘sqlSessionTemplate‘ are requiredProperty 报错 在一个springboot demo启动的时候出现以下错误 &#xff0c;…

Django REST Framework(十九)权限

Django REST framework (DRF) 的权限认证涉及以下几个方面&#xff1a;全局权限配置、局部权限配置、自定义权限类、以及自定义认证类。以下是关于这些方面的详细说明&#xff1a; 1. 全局权限配置 在 Django 项目的配置文件 settings.py 中&#xff0c;可以全局配置 DRF 的权…

Win32 C++ 实现对话框居中显示

使用 MessageBox 对话框显示信息时, 对话框位置总是在屏幕中间, 而不是主窗口的中间, 如何以最简单的方式将对话框移到父窗口中间呢? 那就是使用 CBT 钩子 , 在窗口创建完成前(窗口句柄已经创建完成), 修改窗口的位置, 即可实现对话框在父窗口上居中显示. 首先简单写一个 CBT…