template和component自定义组件之间的区别

在小程序中自定义组件 component 方式和组件模板 template 2种方式实现页面组件化。

 一、component自定义组件

1.概念

自定义组件是指可以被多个页面使用的组件,可以在小程序中多次复用。在开发中可以将一个页面中的代码和样式抽象出来,然后创建一个自定义组件,在其他页面可以使用这个自定义组件,从而达到复用和样式统一目标。

关于组件的具体使用可以翻看之前的文章,不再赘述~~~~~ 

二. template 组件模板

1.概念

组件模板是一个小程序页面的模板。可以在页面定义为多个组件模板的结构和样式,从而快速地创建新的页面,并切也保证页面结构和样式的统一性。

2.定义模板

<template name="empty">
  <view style="width: 100%; height: 100%;background-color: rebeccapurple;">空页面</view>
</template>

注意:可以发现,template 模板组件中没有.js文件。因为 template 模板组件的逻辑部分需要写在父组件的.js文件中

3.使用模板

使用 is 属性,声明需要的使用的模板,然后将模板所需要的 data 传入,如:

<view>
<import src="./templates/empty"/>
<template is="empty" data=""/>
</view>

wxss的样式引入需要我们是 @import 引入我们的模板地址,如:

@import "./templates/empty.wxss"

三、总结
在一个项目我们可以使用 component 自定义组件为我们项目中多次使用的公共组件抽离出来,放在conponents公共文件夹中作为公共组件使用。

template模板组件需要在多处页面使用类似的模块或页面中多次使用的模板,就需要创建 template 模板。两者都可以减少代码量,同时代码高度复用,便于维护,实现项目组件化开发小程序。

component 有自己的.json、.wxml、.js、.wxss文件,和正常的小程序页面接口一样。它同时也可以自己引入别组件作为自己的子组件,所以自定义组件功能更加完整,适合做公共组件;
component组件在页面中.json文件中的 usingComponents 中引入后,就可以在页面中使用;
父组件向 component 组件传值,component 组件也可以向父组件传值;
在同一个WXML文件中创建多个类似的 template 模板,用 name 属性来区分就行;
template 模板组件需要使用 import 引入WXML和WXSS;
template 模板组件中的逻辑部分需要写在引入页面的父组件逻辑中;
通过 template 标签使用模板,template 标签的 is 属性与模板的 name 属性对应,data属性代表传入的模板的数据;

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/20851.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

springboot缓存

1. 认识缓存 一级缓存 - 缓存是一种介于数据永久存储介质与数据应用之间的数据临时存储介质 - 使用缓存可以有效的减少低速数据读取过程的次数&#xff0c;提高系统性能 Service public class BookServiceImplCache implements BookService {Autowiredprivate BookDao book…

Java | 一分钟掌握定时任务 | 3 - 单机定时之Timer

作者&#xff1a;Mars酱 声明&#xff1a;本文章由Mars酱原创&#xff0c;部分内容来源于网络&#xff0c;如有疑问请联系本人。 转载&#xff1a;欢迎转载&#xff0c;转载前先请联系我&#xff01; 介绍 这个是个JDK远古时代的api了&#xff0c;据考证&#xff0c;可以追溯到…

(2)数码管

LED数码管:数码管是一种简单、廉价的显示器&#xff0c;是由多个发光二极管封装在一起组成"8"字器件 51单片机是共阴极连接 74HC245这个芯片有什么作用呢&#xff1f;解&#xff1a;这个芯片被称之为双向数据缓冲器这个芯片的作用&#xff0c;用来进行数据缓冲(提高驱…

如何在 Python 开发环境中调用 ChatGPT 模型?

本文将演示在本地的 python 项目中调用 ChatGPT 模型 前言 作为一名程序员&#xff0c;在开发过程当中时常需要使用 ChatGPT 来完成一些任务&#xff0c;但总是使用网页交互模式去 Web 端访问 ChatGPT 是很麻烦的&#xff0c;这时候我们可以使用代码来调用 ChatGPT 模型&…

RHCSA之查看命令帮助手册

目录 RHCSA之查看命令帮助手册 查看命令类型 --- type Linux中对应的命令类型 帮助命令 help 命令 用法1 help 内部命令 用法2 命令 --help 命令的部分语法符号解析 man 命令 man命令用法 man的帮助级 man 命令帮助信息界面中的常用操作 man命令中帮助信息的结构以及意义…

公司招了一个腾讯拿30K的人,让我见识到了什么是天花板···

前言 人人都有大厂梦&#xff0c;对于软件测试人员来说&#xff0c;BAT 为首的一线互联网公司肯定是自己的心仪对象&#xff0c;毕竟能到这些大厂工作&#xff0c;不仅薪资高待遇好&#xff0c;而且能力技术都能够得到提升&#xff0c;最关键的是还能够给自己镀上一层金&#…

NXP公司LPC21xx+热敏电阻实现温度检测

LPC2131/32/34/36/38微控制器基于16位/32位Arm7TDMI-S™CPU&#xff0c;支持实时仿真和嵌入式跟踪&#xff0c;具有尺寸小&#xff0c;功耗低&#xff0c;多个32位定时器、单/双10位8通道ADC、10位DAC、PWM通道、47个GPIO线&#xff08;它们拥有多达9个边沿或电平触发的外部中断…

保密+完整+可用+安全,规避代码安全「马奇诺防线」,构建软件供应链整体安全

近日&#xff0c;在「江狐会」广州站上&#xff0c;极狐(GitLab) 高级解决方案架构师武让分享了如何通过三大阶段 四大要点&#xff0c;规避代码安全「马奇诺防线」&#xff0c;真正确保软件供应链安全。以下内容整理自本次演讲。Enjoy&#xff5e; 先跟大家分享一个故事 一战…

Cplex的数据类型结构及基本语法功能

本序列将会重开一门新的序列----数学求解器cplex,文章不做简单介绍&#xff0c;不灌水&#xff0c;直接给大家进行讲述如何上手实操&#xff0c;并有针对性的给出相应案例分析。 OPL编程 OPL是ILOG团队为运筹学专家量身定制的一种优化建模语言&#xff0c;语法相对简单&#x…

ChatGPT国内免费使用方法有哪些?

目录 ChatGPT介绍:一、ChatGPT是什么?二、ChatGPT发展:三、ChatGPT 优点:四、国内使用ChatGPT方法五、结语: ChatGPT介绍: 一、ChatGPT是什么? ChatGPT 是一个基于语言模型 GPT-3.5 的聊天机器人&#xff0c;ChatGPT模型是Instruct GPT的姊妹模型&#xff08;siblingmodel&a…

【5.15】一、软件测试基础—软件概述

目录 1.1 软件概述 1.1.1 软件生命周期 1.1.2 软件开发模型 1.1.3 软件质量概述 1.1 软件概述 软件是相对于硬件而言的&#xff0c;它是一系列按照特定顺序组织的计算机数据和指令的集合。 软件的生命周期&#xff1a;软件从“出生” 到 “消亡” 的过程。 1.1.1 软件生…

Foxit PDF Reader及Editor任意代码执行漏洞复现(CVE-2023-27363)

0x01 产品简介 Foxit PDF Reader是一套用来阅读PDF格式文件的软件&#xff0c;由福建福昕软件所研发&#xff0c;主要运行在Windows操作系统上。 0x02 漏洞概述 Foxit PDF Reader及Editor中存在任意代码执行漏洞&#xff0c;由于Foxit PDF Reader/Editor未验证exportXFAData方…

RocketMQ介绍

一、MQ简介 1.1 项目工程弊端 1.2 MQ简介 MQ&#xff08;Message Queue&#xff09;消息队列&#xff0c;是一种用来保存消息数据的队列 队列&#xff1a;数据结构的一种&#xff0c;特征为 “先进先出” 何为消息: 服务器间的业务请求 原始架构&#xff1a; 服务器中的A功能…

Flink学习——基本概述

目录 一、简介 1.1 flink是什么 1.2 flink主要特点 核心特性&#xff1a; 分层API&#xff1a; 1.3 flink vs spark 1.3.1 数据处理框架 1.3.2 数据模型 1.3.3 运行时架构 二、wordcount实例 2.1 项目依赖 2.2 添加框架支持 2.3 批处理 - DataSet API 2.4 有界流处…

DBCO-COOH分子量:305.3,CAS:1353016-70-2,二苯基环辛炔-羧基;类似有DBCO-NH2、SH、MAL、NHS等等

中文名称&#xff1a;二苯基环辛炔-羧基 英文名称&#xff1a;DBCO-acid 英文别称&#xff1a;DBCO-COOH cas: 1353016-70-2 分子式&#xff1a;C19H15NO3 分子量&#xff1a;305.3 DBCO-COOH是DBCO 衍生化的常用构件&#xff0c;在EDC、DCC和HATU等活化剂存在下&#xf…

汇编学习教程:灵活寻址(四)

引言 在上篇博文中&#xff0c;我们学习了 [bxsi] 的灵活寻址形式&#xff0c;由此讲解了汇编中的多重循环实现。那么本篇博文中&#xff0c;我们将继续学习灵活寻址其他实现形式。 本次学习从一道编程案例开始学起。 编程示例如下&#xff1a; assume cs:code,ds:datadata…

【jvm系列-12】jvm性能调优篇---GUI工具的基本使用

JVM系列整体栏目 内容链接地址【一】初识虚拟机与java虚拟机https://blog.csdn.net/zhenghuishengq/article/details/129544460【二】jvm的类加载子系统以及jclasslib的基本使用https://blog.csdn.net/zhenghuishengq/article/details/129610963【三】运行时私有区域之虚拟机栈…

openEuler 成功适配 LeapFive InFive Poros 开发板

近日&#xff0c;openEuler RISC-V 23.03 创新版本在跃昉科技的 Poros 开发板上成功运行。 openEuler 在 Poros 上适配成功&#xff0c;XFCE 桌面启动正常&#xff0c;文件系统、终端模拟器和输入法等相关 GUI 应用也运行流畅&#xff0c;Chromium 浏览器和 LibreOffice 等应用…

大屏只用来做汇报?知道这6个应用场景,直接升职加薪!

五一假几个朋友小聚了一下&#xff0c;好久没联系了&#xff0c;现在才知道大家从事行业五花八门的。知道我从事IT行业好几年&#xff0c;他们非要让我讲讲现在异常火爆的大屏&#xff0c;说是所在企业单位都在研究这玩意儿&#xff0c;有的业务人员焦虑不已不知道如何下手&…

SD-如何训练自己的Lora模型

官方地址&#xff1a;GitHub - bmaltais/kohya_ss 尝试过mac和Ubuntu&#xff0c;装上后都会有问题 Windows按照官方步骤安装即可 第一步 git clone https://github.com/bmaltais/kohya_ss.git cd kohya_sspython -m venv venv .\venv\Scripts\activatepip install torch1.…