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

目录

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"

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

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

相关文章

Redis设计与实现之简单的动态

目录 一、内部数据结构 二、简单动态字符串 1、sds的用途 实现字符串对象 将sds代替C默认的char*类型 2、Redis中的字符串 sds的实现 3、优化追加操作 4、sds 模块的 API 三、Redis动态字符串的内存分配和释放是如何进行的&#xff1f; 四、Redis动态字符串的扩容策略…

PDF控件Spire.PDF for .NET【转换】演示:将 PDF 转换为线性化

PDF 线性化&#xff0c;也称为“快速 Web 查看”&#xff0c;是一种优化 PDF 文件的方法。通常&#xff0c;只有当用户的网络浏览器从服务器下载了所有页面后&#xff0c;用户才能在线查看多页 PDF 文件。然而&#xff0c;如果 PDF 文件是线性化的&#xff0c;即使完整下载尚未…

IntelliJ IDEA2023学习教程

详细介绍idea开发工具及使用技巧 1. 2023版安装1.1删除老版本1.2 下载及安装 3.快捷技巧4. 创建各种model 1. 2023版安装 1.1删除老版本 如果以前装有idea需要先删除&#xff0c;以避免冲突&#xff0c;在idea安装目录/bin/Uninstall.exe双击1.2 下载及安装 最新版本 https:/…

Unity Web 浏览器-3D WebView中有关于CanvasWebViewPrefab

一、CanvasWebViewPrefab默认设置 这个是在2_CanvasWebViewDemo示例场景文件中可以可以查看得到&#xff0c;可以看出CanvasWebViewPrefab的默认配置如下。 二、Web 浏览器网页和Unity内置UI的渲染顺序 1、如果你勾选了以下这个Native 2D Mode选项的话&#xff0c;那么Unit…

计算机设计大赛信息可视化设计的获奖经验剖析解读—基于本专栏文章助力4C大赛【全网最全万字攻略-获奖必读】

文章目录 一.中国大学生计算机设计大赛1.1赛道解读1.2 信息可视化设计小类介绍1.2 小类区别解读 二.信息可视化设计赛道获奖经验2.1 四小类作品预览2.1.1 数据可视化小类-优秀参赛作品展览2.1.2 信息图形设计小类-优秀参赛作品展览2.1.3 动态信息影像&#xff08;MG动画&#x…

记录Oracle Exadata X8M-2 存储服务器告警灯亮的处理过程(/SYS/MB/P0PCIE7)

文章目录 概要调查流程处理方式&#xff1a; 概要 现场服务器告警灯亮&#xff0c;其他服务器正常&#xff0c;磁盘灯正常&#xff0c;所以从整体来看应是内部部件抛出的异常问题&#xff0c;需要登录机器确认&#xff1a; 调查流程 通过ILOM web界面查看服务器状态进行信息…

大数据技术11:Hadoop 原理与运行机制

前言&#xff1a;HDFS &#xff08;Hadoop Distributed File System&#xff09;是 Hadoop 下的分布式文件系统&#xff0c;具有高容错、高吞吐量等特性&#xff0c;可以部署在低成本的硬件上。 一、Hadoop简介 1.1、Hadoop定义 Hadoop 作为一个开源分布式系统基础框架&#x…

Flutter 打包 iOS 苹果 IPA 应用有哪些优势?如何实现?

经常和移动应用开发相关的话题打交道的伙伴们都知道。在开发移动应用时&#xff0c;选择合适的打包方式对于应用的发布和分发至关重要。在今天这篇文章中&#xff0c;我将和大家聊聊 Flutter 打包 iOS 苹果 IPA 应用的优势&#xff0c;并分享一些使用 Flutter 打包 ios 苹果 ip…

一分钟带你了解电容

电容器中的电容究竟是怎么定义的&#xff1f; 一个电容器&#xff0c;如果带1库的电量时两级间的电势差是1伏&#xff0c;这个电容器的电容就是1法拉&#xff0c;即&#xff1a;CQ/U 。但电容的大小不是由Q&#xff08;带电量&#xff09;或U&#xff08;电压&#xff09;决定…

有关爬虫http/https的请求与响应

简介 HTTP协议&#xff08;HyperText Transfer Protocol&#xff0c;超文本传输协议&#xff09;&#xff1a;是一种发布和接收 HTML页面的方法。 HTTPS&#xff08;Hypertext Transfer Protocol over Secure Socket Layer&#xff09;简单讲是HTTP的安全版&#xff0c;在HTT…

ros2+gazebo建立机器人

Building your own robot In this tutorial we will learn how to build our own robot in SDFormat. We will build a simple two wheeled robot.本文用SDF文件建立一个2轮机器人 You can find the finished SDF file for the tutorial here.SDF文件点击下载 What is SDF SD…

SQL排列组合

SQL排列组合 1、排列组合概述2、SQL排列组合2.1、排列2.2、组合3、SQL排列组合的应用1、排列组合概述 排列组合是针对离散数据常用的数据组织方法,本节将分别介绍排列、组合的SQL实现方法,并结合实例着重介绍通过组合对数据的处理 如何使用SQL实现排列与组合?本节将通过介绍…

nodejs微信小程序+python+PHP的驾照理论模拟考试系统-计算机毕业设计推荐

从角色上分为用户和管理员两部分&#xff0c;用户功能主要是在前台&#xff0c;主要内容首页&#xff0c;注册登录&#xff0c; 模拟考试&#xff0c;论坛&#xff0c;公告信息 &#xff0c;个人中心&#xff0c;考试记录&#xff0c;错图记录等功能&#xff0c;后台部分主要给…

2037约瑟夫问题(C语言)

目录 一&#xff1a;问题 二&#xff1a;思路分析 三&#xff1a;代码 一&#xff1a;问题 二&#xff1a;思路分析 1.输出结果是按编号输出&#xff0c;所以要考虑数组&#xff0c;数组里面存的数是有编号的&#xff0c;所以把n个人放到数组中&#xff0c;让他们的编号也是…

案例057:基于微信小程序的马拉松报名系统

文末获取源码 开发语言&#xff1a;Java 框架&#xff1a;SSM JDK版本&#xff1a;JDK1.8 数据库&#xff1a;mysql 5.7 开发软件&#xff1a;eclipse/myeclipse/idea Maven包&#xff1a;Maven3.5.4 小程序框架&#xff1a;uniapp 小程序开发软件&#xff1a;HBuilder X 小程序…

行为树保姆级教程(以机器人的任务规划为例

行为树 目录 什么是行为树(behavior tree)&#xff1f;行为树的相关术语 行为节点和控制节点不同类型的控制结点&#xff1a; 顺序节点选择节点并行节点装饰结点 机器人的例子&#xff1a;物体搜索 1&#xff1a;如果只存在一个地点A&#xff0c;那么行为树很简单&#xff0…

CSS第二天导读

1&#xff0c;Emmet语法 Emmet语法的前身是Zen coding&#xff0c;它使用缩写&#xff0c;来提高html / css 的编写速度&#xff0c;Vscode内部已经集成该语法 1.1&#xff0c;快速生成HTML结构语法 1.想要快速生成多个相同标签&#xff0c;加上*就可以了&#xff0c;比如 d…

物流实时数仓:数仓搭建(DWD)一

系列文章目录 物流实时数仓&#xff1a;采集通道搭建 物流实时数仓&#xff1a;数仓搭建 物流实时数仓&#xff1a;数仓搭建&#xff08;DIM&#xff09; 物流实时数仓&#xff1a;数仓搭建&#xff08;DWD&#xff09;一 文章目录 系列文章目录前言一、文件编写1.目录创建2.b…

iPhone 16 的电池供应可能来自印度

据英国《金融时报》报道&#xff0c;据报道&#xff0c;苹果已通知其供应链&#xff0c;包括中国德赛公司和台湾新普科技等电池供应商&#xff0c;其倾向于将 iPhone 16 的电池供应转移到印度。苹果鼓励供应商将现有产能迁往印度&#xff0c;以扩大该地区的生产规模。 鉴于电池…

Redis高级特性解析:持久化、主从复制与哨兵机制全面探讨

Redis持久化 RDB快照&#xff08;snapshot&#xff09; 在默认情况下&#xff0c; Redis 将内存数据库快照保存在名字为 dump.rdb 的二进制文件中。 你可以对 Redis 进行设置&#xff0c; 让它在“ N 秒内数据集至少有 M 个改动”这一条件被满足时&#xff0c; 自动保存…