使用vueuse在组件内复用模板

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">
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.rhkb.cn/news/410280.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

链表OJ题——使用栈实现单链表的逆序打印

文章目录 一、题目链接二、解题思路三、解题代码 一、题目链接 题目描述&#xff1a;使用栈&#xff0c;实现单链表的逆序打印 二、解题思路 三、解题代码 /*** 非递归实现单链表的顶逆序打印——>通过栈来实现* param*/public void printReverseListFromStack(){Stack<…

短视频SDK解决方案,原开发团队,一对一技术支持

美摄科技&#xff0c;作为行业领先的视频技术提供商&#xff0c;凭借深厚的技术积累和敏锐的市场洞察&#xff0c;隆重推出其短视频SDK解决方案&#xff0c;旨在为全球开发者及内容创作者搭建一座通往无限创意与高效生产的桥梁。 【一站式解决方案&#xff0c;赋能创意无界】 …

【js原型和原型链】

js原型和原型链 一、构造函数和原型对象中的this二、原型对象的constructor属性三、原型链四、关系图五、普通函数和函数对象 参考文章链接: link 一、构造函数和原型对象中的this 指向实例对象 // 定义构造函数function Star(name,age){this.name name;this.age age;conso…

前端面试题 webpack的工作流程

一、流程图 二、重要概念 1.entry入口&#xff1a; Webpack 从配置的入口点开始&#xff0c;分析应用程序的依赖关系 2.output出口&#xff1a; 定义了打包后的文件如何输出&#xff0c;包括文件名和输出路径。 3.loader加载器&#xff1a; Webpack 本身只能处理 JavaScr…

Bytebase 2.22.2 - 允许在工作空间为群组分配角色

&#x1f680; 新功能 允许在工作空间给群组分配角色。 支持禁用邮箱密码登录&#xff0c;仅允许 SSO 登录的设置项。 新增 Postgres SQL 审核规则&#xff1a;禁止在列上设置会变化的默认值。 &#x1f514; 重大变更 下线项目内的变更历史页面&#xff1b;所有变更历史仍可…

uboot环境变量擦除之烧录工具擦除flash mtd0分区

有时会uboot环境变量修改了没有生效,需要擦除整个mtd分区 Erasing at 0x100000 – 100% complete. &#xff08;1M&#xff09; uboot给flash的中分区

实体书商城小程序的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;用户管理&#xff0c;小说分类管理&#xff0c;小说信息管理&#xff0c;订单管理&#xff0c;系统管理 微信端账号功能包括&#xff1a;系统首页&#xff0c;小说信息&#xff0c;小说资讯&#xff0…

IGE-LIO:充分利用强度信息克服激光退化场景下的定位精度

更多优质内容&#xff0c;请关注公众号&#xff1a;智驾机器人技术前线 1.论文信息 论文标题&#xff1a;IGE-LIO: Intensity Gradient Enhanced Tightly-Coupled LiDAR-Inertial Odometry 作者&#xff1a;Ziyu Chen, Hui Zhu, Biao Yu, Chunmao Jiang, Chen Hua, Xuhui Fu a…

图新说-调整标绘线面的压盖顺序的两种方法

0.序 图新说作为一个三维可视化汇报工具&#xff0c;在公安消防领域常用于做态势标绘&#xff0c;应急救援方案&#xff0c;安保预案等。 如果撤离路线&#xff0c;或者行进路线【线对象】经过了水源地、危险区等【面对象】。如何确保线对象显示在面对象的上面&#xff0c;不被…

Nginx的核心!!! 负载均衡、反向代理

目录 负载均衡 1.轮询 2.最少连接数 3.IP哈希 4.加权轮询 5.最少时间 6.一致性哈希 反向代理 测试 之前讲过Nginx 的简介和正则表达式&#xff0c;那些都是Nginx较为基础的操作&#xff0c;Nginx 最重要的最核心的功能&#xff0c;当属反向代理和负载均衡了。 负载均…

统一 transformer 与 diffusion !Meta 融合新方法剑指下一代多模态王者

本文引入了 Transfusion&#xff0c;这是一种可以在离散和连续数据上训练多模态模型的方法。 来源丨机器之心 一般来说&#xff0c;多模态生成模型需要能够感知、处理和生成离散元素&#xff08;如文本或代码&#xff09;和连续元素&#xff08;如图像、音频和视频数据&#xf…

【操作系统】实验:文件系统

目录 一、实验目的 二、实验要求 三、实验步骤 四、核心代码 五、记录与处理 六、思考 七、完整报告和成果文件提取链接 一、实验目的 1、掌握文件系统的基本结构和文件系统的管理方法 2、加深对两级文件目录认识和理解 3、对文件操作的系统命令实质内容和执行过程深入…

Python实现等距映射(ISOMAP)降维算法

目录 Python实现等距映射&#xff08;ISOMAP&#xff09;降维算法的博客引言ISOMAP算法原理ISOMAP的优势与局限Python实现ISOMAP算法1. 创建ISOMAP类2. 在瑞士卷数据集上应用ISOMAP3. 结果分析 总结运行结果 Python实现等距映射&#xff08;ISOMAP&#xff09;降维算法的博客 …

NS2582 同步升压双节锂电池充电管理 IC

1 特性  最大 2A 输出同步开关型升压充电器  升压效率可高达 90% 以上  内置电池短路 / 涓流 / 恒流 / 恒压模式  0.5% 电池恒压模式电压精度  支持 LED 充电状态指示  支持充电电流外部可调  支持输入适配器 DPM 功能  外置 EN 使能…

探索Python的Excel力量:openpyxl库的奥秘

文章目录 探索Python的Excel力量&#xff1a;openpyxl库的奥秘背景&#xff1a;为什么选择openpyxl&#xff1f;库简介&#xff1a;openpyxl是什么&#xff1f;安装指南&#xff1a;如何安装openpyxl&#xff1f;快速上手&#xff1a;五个基本函数实战演练&#xff1a;三个应用…

Adobe Dreamweaver(DW)网页代码编辑器win/mac软件安装下载

一、Adobe DW软件概览 1.1 DW软件简介 Adobe Dreamweaver&#xff08;简称DW&#xff09;是一款功能强大的网页代码编辑器&#xff0c;由Adobe公司开发并维护。其全称为“Adobe Dreamweaver”&#xff0c;中文译为“梦想编织者”。DW集网页制作和管理网站于一身&#xff0c;支…

Ubuntu系统使用Docker部署中文版trilium并实现远程编辑笔记

文章目录 前言1. 安装docker与docker-compose2. 启动容器运行镜像3. 本地访问测试4.安装内网穿透5. 创建公网地址6. 创建固定公网地址 前言 今天和大家分享一款在G站获得了26K的强大的开源在线协作笔记软件&#xff0c;Trilium Notes的中文版如何在Linux环境使用docker本地部署…

代码随想录第十九天 | 110.平衡二叉树,257. 二叉树的所有路径,404.左叶子之和,222. 完全二叉树的节点个数

110. 平衡二叉树 第一想法&#xff1a;首先要明确平衡二叉树的定义&#xff1f;左右节点的高度差不超过1&#xff1f;不会概念感觉无法下手... 返回参数返回int,为了标记已经不是平衡二叉树&#xff0c;用-1作标记 int traversal(TreeNode* root){if(rootnullptr) return 0;…

量化需求的业务价值 常见6种方法

量化需求的业务价值可以帮助项目团队更好地理解需求的重要性&#xff0c;并据此做出明智的决策。如果没有明确的量化目标&#xff0c;团队难以做出基于数据的决策&#xff0c;可能导致项目方向模糊&#xff0c;资源分配不当&#xff0c;导致项目进度难以把控&#xff0c;延误交…

平安银行“平安财富杯”高尔夫青少年冠军赛盛大举行,各组冠军精彩角逐实力尽显

今年夏天&#xff0c;巴黎体育盛会聚集了全球目光&#xff0c;中国选手林希妤斩获女子高尔夫球铜牌&#xff0c;追平中国女子高尔夫球历史最佳奥运战绩&#xff0c;让球迷大呼过瘾。奥运会结束后&#xff0c;比赛的热情在中原大地继续上演。8月22日&#xff0c;2024年平安银行“…