微信小程序---自定义组件

目录

1.局部引用组件

2.全局引用组件

3.组件和页面的区别

4.自定义组件样式

5.properties属性

6.data和properties的区别

7.数据监听器

8.纯数据字段

9.自定义组件-组件的生命周期

lifetimes节点

10.组件所在的页面的生命周期

pageLifetimes节点

11.插槽

(1)单个插槽

(2)多个插槽


1.局部引用组件

2.全局引用组件

3.组件和页面的区别

4.自定义组件样式

修改组件的样式隔离选项

5.properties属性

在小程序组件中,properties是组件的对外属性,用来接收外接传递到组件中的数据,示例代码如下:

6.data和properties的区别

7.数据监听器

监听对象中的所有属性,使用通配符**,’对象.**‘

8.纯数据字段

概念:纯数据字段指的是那些不用于界面渲染的data字段

应用场景: 例如有些情况下,某些 data 中的字段既不会展示在界面上,也不会传递给其他组件,仅仅在当前组件内部使用。带有这种特性的 data 字段适合被设置为纯数据字段

好处:纯数据字段有助于提升页面更新的性能

使用规则:在Component 构造器的 options 节点中,指定 pureDataPattern 为一个正则表达式,字段名符合这个正则表达式的字段将成为纯数据字段,示例代码如下:

9.自定义组件-组件的生命周期

created:组件实例刚被创建好的时候,created生命周期函数会被触发

此时还不能调用setData,只应该用于给组件的this添加一些自定义的属性字段  个人觉得类似于vue中的beforeCreated

attached:组件完全初始化完毕,进入页面节点树后,attached生命周期函数会被触发

此时this.data已经被初始化完毕,这个生命周期很有用,绝大多数初始化工作可以在这个时机进行(例如发送请求获取初始化数据) 个人觉得类似于vue中的created

detached:在组件离开页面节点树后, detached 生命周期函数会被触发

退出一个页面时,会触发页面内每个自定义组件的 detached 生命周期函数,此时适合做一些清理性质的工作,类似于vue的destroy

lifetimes节点

10.组件所在的页面的生命周期

使用场景:有时自定义组件的行为依赖于页面状态的变化,此时就需要用到组件所在页面的生命周期 例如:每当触发页面的show生命周期函数时,我们希望能够重新生成一个随机的RGB颜色值。(学到这里,不得不感叹小程序的生命周期函数是真的多啊啊啊啊!短暂的发一下疯)

pageLifetimes节点

11.插槽

在自定义组件的 wxml结构中,可以提供一个<slot> 节点(插槽),用于承载组件使用者提供的 wxml 结构。

(1)单个插槽

利用slot进行占位<slot></slot>

(2)多个插槽

可以在组件的.js文件中加入multipleSlots,具体方法如下

如何去区分多个插槽呢,可以通过name属性进行区分 例如name="test"

在使用的时候,直接slot="test"

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

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

相关文章

bugkuctf web随记wp

常规思路&#xff1a; 1&#xff0c;源码2&#xff0c;抓包3&#xff0c;御剑dirsearch扫后台检查是否有git文件未删除4&#xff0c;参数 本地管理员&#xff1a;1&#xff0c;cu看源码&#xff0c;sci看源码有一串东西2&#xff0c;base64解码后是test123猜测是密码3&#x…

实战——Mac M2 安装mat工具

线上环境出现内存飙升的情况&#xff0c;需要工具定位问题发生点就需要用到mat工具了&#xff0c;之前都是在intel芯片环境上安装的&#xff0c;现在换了m2芯片&#xff0c;导致出现了问题&#xff0c;经过一系列调研都解决了&#xff0c;特此记录下&#xff0c;以备后查 开发…

架构设计系列之常见架构(一)

本部分对常见架构进行简单的说明。 一、三层架构之经典 MVC 经典的 MVC 架构&#xff08;Model-View-Controller&#xff09;架构是软件系统架构设计中的经典&#xff0c;它将应用程序分为三个主要部分&#xff1a; 模型&#xff08;Model&#xff09;视图&#xff08;View&…

微信小程序 全局共享数据 mobx

前言 全局数据共享&#xff08;又叫做&#xff1a;状态管理&#xff09;是为了解决组件之间数据共享的问题。开发中常用的全局数据共享方案有&#xff1a;Vuex、Redux、MobX 等。 一. 安装 npm install --save mobx-miniprogram4.13.2 mobx-miniprogram-bindings2.1.5 安装完…

单机环境下一人一单

优惠券秒杀 添加优惠卷 店铺发布优惠券又分为平价券和特价券, 平价券可以任意购买而特价券需要秒杀抢购(限制数量和时间) tb_voucher(平价券): 优惠券的基本信息 tb_seckill_voucher(秒杀券): 有voucher_id字段表示具有优惠卷的基本信息,此外还有库存,开始抢购时间,结束抢购…

VMWare Tools 共享目录设置

vmware tools安装完成后&#xff0c;进入到工项目录设置 点击虚拟机设置->硬件->CD/DVD(SATA) &#xff0c;勾选使用物理驱动器&#xff0c;勾选自动检测 1、windows 操作系统设置 设置共享文件夹时&#xff0c;需要勾选 “ 在windows客户机中映射为网络驱动器”。 设置…

数字孪生Web3D智慧机房可视化运维云平台建设方案

前言 进入信息化时代&#xff0c;数字经济发展如火如荼&#xff0c;数据中心作为全行业数智化转型的智慧基座&#xff0c;重要性日益凸显。与此同时&#xff0c;随着东数西算工程落地和新型算力网络体系构建&#xff0c;数据中心建设规模和业务总量不断增长&#xff0c;机房管理…

AGI魔盒,会放出冥王PLUTO还是阿童木?

人机共生&#xff0c;是科幻作品永恒的主题。其中&#xff0c;《冥王PLUTO》可能是最早探讨人类与机器人如何在冲突中共存的漫画作品。 如果说阿童木是人机共生的“和平使者”&#xff0c;启蒙了几代人对机器人的信任和热爱,那么冥王PLUTO就是阿童木的反面&#xff0c;一个心怀…

nodejs+vue+微信小程序+python+PHP血液中心管理平台的设计与实现-计算机毕业设计推荐

实现采血的完整功能&#xff0c;系统用户主要分为两类&#xff0c;一类是管理员&#xff0c;一类是采血工作人员。管理员主要对采血工作人员以及血库进行管理。派发账号给员工作为采血工作人员&#xff0c;对血库的出库入库进行信息化管理。采血工作人员主要完成采血工作。通过…

快速碰撞刚性环境的机器人低阻抗控制(阻尼影响分析)

问题描述 在快速碰撞刚性环境的机器人低阻抗控制中&#xff0c;需要通过精确的碰撞检测和处理&#xff0c;以及低阻抗控制策略的优化&#xff0c;来减少碰撞对机器人和环境的影响。同时&#xff0c;我们还需要适应刚性环境&#xff0c;提高机器人的稳定性和鲁棒性&#xff0c;…

Linux(21):软件安装 RPM,SRPM 与 YUM

软件管理员简介 以原始码的方式来安装软件&#xff0c;是利用厂商释出的Tarball来进行软件的安装。 不过&#xff0c;你每次安装软件都需要侦测操作系统与环境、设定编译参数、实际的编译、最后还要依据个人喜好的方式来安装软件到定位。这过程是真的很麻烦的。 如果厂商先在他…

XUbuntu22.04之HDMI显示器设置竖屏(一百九十八)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…

jrebel debug 启动不起来

idea更新之后jrebel debug模式启动不起来。 将下面的设置取消之后就可以了&#xff0c;希望能帮到你们… 被卡了两天… jrebel信息。 idea IntelliJ IDEA 2023.3.1 (Ultimate Edition) Build #IU-233.11799.300, built on December 12, 2023 Licensed to Alexandra Martin…

jmeter,读取CSV文件数据的循环控制

1、构造csv数据 保存文件时需要注意文件的编码格式 id,name,limit,status,address,start_time 100,小米100,1000,1,某某会展中心101,2023/8/20 14:20 101,小米101,1001,1,某某会展中心102,2023/8/21 14:20 2、在线程组下添加【CSV数据文件设置】元件 3、CSV文件数据的循环控…

【mysql】MySQL基础

什么是数据库 文件保存数据有以下几个缺点&#xff1a; 文件的安全性问题文件不利于数据查询和管理文件不利于存储海量数据文件在程序中控制不方便 所以设计出了数据库&#xff0c;用来管理数据。 数据库&#xff08;Database&#xff09;是按照数据结构来组织、存储和管理数…

QT- QT-lximagerEidtor图片编辑器

QT- QT-lximagerEidtor图片编辑器 一、演示效果二、关键程序三、下载链接 功能如下&#xff1a; 1、缩放、旋转、翻转和调整图像大小 2、幻灯片 3、缩略图栏&#xff08;左、上或下&#xff09;&#xff1b;不同的缩略图大小 4、Exif数据栏 5、内联图像重命名 6、自定义快捷方式…

DC-3靶场

DC-3 DC-3靶场链接&#xff1a;https://download.vulnhub.com/dc/DC-3-2.zip 下载后解压会有一个DC-3.ova文件&#xff0c;直接在vm虚拟机点击左上角打开-->文件--.选中这个.ova文件就能创建靶场&#xff0c;kali和靶机都调整至NAT模式 首先进行主机发现&#xff1a; arp…

Appium自动化常用adb操作封装

一、前置说明 在Appium自动化中&#xff0c;经常需要使用adb命令与设备进行交互&#xff0c;所以有必要把常用的adb操作封装成一个类 二、代码实现 import os import platform import re import subprocessfrom common import path from common.exception import AndroidSDK…

sysdig源码分析

Falco 0.6.0 Released New Features | Sysdig 在0.6.0之前&#xff0c;falco使用来自sysdig的内核模块sysdig-probe。从0.6.0开始&#xff0c;falco使用自己的内核模块falco-probe。内核模块实际上是由相同的源代码构建的&#xff0c;但是拥有一个特定于falco的内核模块允许fa…

电子科大陈瑞杰:开源不是那么的遥不可及

个人介绍 大家好&#xff0c;我是来自西安电子科技大学计算机学院软件工程专业的陈瑞杰&#xff0c;本科就读中北大学&#xff0c;本科通过校赛加入ACM校队&#xff0c;参与ACM-ICPC、CCPC等算法比赛&#xff0c;获区域赛铜奖(CCPC铜首&#xff0c;差点银&#xff0c;比较可惜…