使用vueuse在组件内复用模板

2024-08-28 14:20

本文主要是介绍使用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 进行封装和复用。

这篇关于使用vueuse在组件内复用模板的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1115011

相关文章

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom

中文分词jieba库的使用与实景应用(一)

知识星球:https://articles.zsxq.com/id_fxvgc803qmr2.html 目录 一.定义: 精确模式(默认模式): 全模式: 搜索引擎模式: paddle 模式(基于深度学习的分词模式): 二 自定义词典 三.文本解析   调整词出现的频率 四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取

使用SecondaryNameNode恢复NameNode的数据

1)需求: NameNode进程挂了并且存储的数据也丢失了,如何恢复NameNode 此种方式恢复的数据可能存在小部分数据的丢失。 2)故障模拟 (1)kill -9 NameNode进程 [lytfly@hadoop102 current]$ kill -9 19886 (2)删除NameNode存储的数据(/opt/module/hadoop-3.1.4/data/tmp/dfs/na

Hadoop数据压缩使用介绍

一、压缩原则 (1)运算密集型的Job,少用压缩 (2)IO密集型的Job,多用压缩 二、压缩算法比较 三、压缩位置选择 四、压缩参数配置 1)为了支持多种压缩/解压缩算法,Hadoop引入了编码/解码器 2)要在Hadoop中启用压缩,可以配置如下参数

Makefile简明使用教程

文章目录 规则makefile文件的基本语法:加在命令前的特殊符号:.PHONY伪目标: Makefilev1 直观写法v2 加上中间过程v3 伪目标v4 变量 make 选项-f-n-C Make 是一种流行的构建工具,常用于将源代码转换成可执行文件或者其他形式的输出文件(如库文件、文档等)。Make 可以自动化地执行编译、链接等一系列操作。 规则 makefile文件

使用opencv优化图片(画面变清晰)

文章目录 需求影响照片清晰度的因素 实现降噪测试代码 锐化空间锐化Unsharp Masking频率域锐化对比测试 对比度增强常用算法对比测试 需求 对图像进行优化,使其看起来更清晰,同时保持尺寸不变,通常涉及到图像处理技术如锐化、降噪、对比度增强等 影响照片清晰度的因素 影响照片清晰度的因素有很多,主要可以从以下几个方面来分析 1. 拍摄设备 相机传感器:相机传

poj3468(线段树成段更新模板题)

题意:包括两个操作:1、将[a.b]上的数字加上v;2、查询区间[a,b]上的和 下面的介绍是下解题思路: 首先介绍  lazy-tag思想:用一个变量记录每一个线段树节点的变化值,当这部分线段的一致性被破坏我们就将这个变化值传递给子区间,大大增加了线段树的效率。 比如现在需要对[a,b]区间值进行加c操作,那么就从根节点[1,n]开始调用update函数进行操作,如果刚好执行到一个子节点,

C++11第三弹:lambda表达式 | 新的类功能 | 模板的可变参数

🌈个人主页: 南桥几晴秋 🌈C++专栏: 南桥谈C++ 🌈C语言专栏: C语言学习系列 🌈Linux学习专栏: 南桥谈Linux 🌈数据结构学习专栏: 数据结构杂谈 🌈数据库学习专栏: 南桥谈MySQL 🌈Qt学习专栏: 南桥谈Qt 🌈菜鸡代码练习: 练习随想记录 🌈git学习: 南桥谈Git 🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈�

如何在页面调用utility bar并传递参数至lwc组件

1.在app的utility item中添加lwc组件: 2.调用utility bar api的方式有两种: 方法一,通过lwc调用: import {LightningElement,api ,wire } from 'lwc';import { publish, MessageContext } from 'lightning/messageService';import Ca

pdfmake生成pdf的使用

实际项目中有时会有根据填写的表单数据或者其他格式的数据,将数据自动填充到pdf文件中根据固定模板生成pdf文件的需求 文章目录 利用pdfmake生成pdf文件1.下载安装pdfmake第三方包2.封装生成pdf文件的共用配置3.生成pdf文件的文件模板内容4.调用方法生成pdf 利用pdfmake生成pdf文件 1.下载安装pdfmake第三方包 npm i pdfma