小程序-4(自定义组件:数据、属性、数据监听器、生命周期函数、插槽、父子通信、behaviors)

目录

1.组件的创建和引用

局部引用组件

全局引用组件

组件和页面的区别

组件样式隔离

​编辑

组件样式隔离的注意点

修改组件的样式隔离选项

data数据

methods方法

properties属性

data和properties属性的区别

使用setData修改properties的值

2.数据监听器

什么是数据监听器

数据监听器的基本用法

监听对象属性的变化

监听对象中所有属性的变化

纯数据字段

纯数据字段的使用规则

纯数据字段改造成数据监听器

3.组件的生命周期

组件的全部的生命周期函数

组件主要的生命周期函数

lifetimes节点

组件所在页面的生命周期函数

pageLifeTimes节点

4.插槽

什么是插槽

单个插槽

启用多个插槽

定义和使用多个插槽

5.父子组件之间的通信

三种方式

属性绑定

事件绑定

使用selectComponent获取组件实例

6.behaviors

什么是behaviors

behaviors的导入和挂载

behaviors的重名


1.组件的创建和引用

局部引用组件

创建组件:右键-新建文件夹-右键-新建文件夹-右键-新建components

创建完组件后,在页面的.json文件中引入组件,在usingComponents中 "组件名":"/components/test/test"

在页面的.wxml文件中,使用组件 

全局引用组件

在app.json中引用组件

组件和页面的区别

组件的.json文件中需要声明"compotent":true属性

组件的.js文件中调用的是Compotent()函数

组件的事件处理函数需要定义到methods节点中,写在methods中

组件样式隔离

组件之间不会相互影响,组件和小程序页面之间不会相互影响

组件样式隔离的注意点

app.wxss中的全局样式对组件无效

只有类选择器才会有样式隔离效果,id选择器、属性选择器和标签选择器不受样式隔离的影响,所以建议使用类选择器,来避免样式的混淆

修改组件的样式隔离选项

第一种:在组件的.js文件中添加Component()方法,在其中使用options来修改组件隔离选项

第二种:在组件的.json文件中添加"styleIsolation":"isolated"来修改

styleIsolation的可选值有三种

isolated 组件和组件之间不会影响,组件和小程序页面之间不会影响

apply-shared  页面的样式会影响到组件的样式,但是组件的样式不会影响到页面的样式

shared  页面和组件之间的样式相互影响

data数据

用于组件模板渲染的私有数据,定义到data节点中

Component()方法的data节点中

methods方法

事件处理函数和自定义方法需要定义到methods节点中

事件处理函数指的是bindtap绑定的函数,自定义的方法以_下划线开头,可以调用wx.showToast()方法来显示弹窗,在wx.showToast()中有title和icon两个属性,icon一般是"none",即没有图标只有文字

properties属性

properties是组件的对外属性,用来接收外界传递到组件中的数据

第一种: max:Number        (简化定义属性的方法,没有指定属性默认值)

第二种: max{type:Number, value:10}  (完整定义属性的方法,指定属性默认值和属性的数据类型)

自增的时候控制最大值  if(this.data.count>=this.properties.max) return

data和properties属性的区别

二者都是可读可写的,用法相同

data更倾向于存储组件的私有数据,而properties更倾向于存储外界传递到组件中的数据

使用setData修改properties的值

该点的主要意思就是this.data.count=this.properties.count

2.数据监听器

什么是数据监听器

用于监听和响应任何属性和数据字段的变化,从而执行特定的操作

数据监听器的基本用法

监听器   能实现自动计算

observers:{

        'n1,n2':function(n1,n2){            //监听数据n1,n2的变化

        this.setData({sum:n1+n2})

}

}

监听对象属性的变化

支持监听对象中单个或者多个属性的变化

为谁赋值就用this.data.对象.属性A触发

可以修改某个对象的某个属性值

监听对象中所有属性的变化

如果某个对象需要监听的属性太多,可以使用通配符**来监听对象中所有属性的变化

'rgb.r,rgb.g,rgb.b':function(r,g,b)

'rgb.**':function(obj)

注意下面美元符号的用法

纯数据字段

纯数据字段指的是不用于界面渲染的data字段

如某些data中的字段既不会展示在界面上,也不会传递给其他组件,仅仅在当前组件内部使用

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

纯数据字段的使用规则

在Component方法中的options中写pureDataPattern:/^_/,并将想要的数据前面都加上_,使其成为纯数据字段

纯数据字段改造成数据监听器

3.组件的生命周期

组件的全部的生命周期函数

组件主要的生命周期函数

created、attached、detached

created:组件实例刚被创建好

attached:组件完全初始化完毕,进入页面节点树

detached:组件离开页面节点树

lifetimes节点

在Component函数中写lifetimes节点,在该字段中进行声明attached()和detached()

组件所在页面的生命周期函数

自定义组件的行为依赖于页面状态的变化,需要用到组件所在页面的生命周期

自定义组件中,组件所在页面的生命周期函数有show hide resize

show 组件所在的页面被展示时执行

hide 组件所在页面被隐藏时执行

resize 组件所在页面尺寸变化时执行

pageLifeTimes节点

4.插槽

什么是插槽

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

简单来说就是占位,先放好位置,但是不放内容,让使用者自行放入内容

单个插槽

例如,创建了一个test4组件,在test4的wxml文件中放置了一个view标签(有内容)和一个slot标签(无内容),在home文件中引入该组件,并通过view标签将内容放入slot标签中,实现占位和赋值

home.wxml

test4.wxml

结果

启用多个插槽

在组件的.js文件中,通过options:{multipleSlots:true}来启用多个插槽

定义和使用多个插槽

定义时给每个slot标签命名,name="",合理即可

使用时,在每个标签中添加上slot="对应名"

5.父子组件之间的通信

三种方式

属性绑定

实现父向子传递数据

在home.wxml中放置一个view,引入count,并在其js文件中,将count值赋值为0;在子组件中的wxml文件中写一个view标签,将count值放进去,在test5.js文件中接收count,一旦接收到就会实现数据通信

home.wxml

test5.wxml

test5.js

实现效果

事件绑定

利用自定义事件实现子向父传递数据

在子组件中的按钮绑定了一个addCount函数,每点击一次实现自增加一;现在在触发按钮时,将数据传递给父组件,让父组件也共享数据

在子组件的.js文件中使用this.triggerEvent('自定义事件名',数据)   value在此处赋值  this.data=this.properties

在父组件的.js文件中,通过e.detail获取到子组件传递过来的数据

使用selectComponent获取组件实例

在父组件的wxml文件中给子组件定义一个类选择器或者id选择器,设置一个按钮绑定获取子组件数据的事件函数

在子组件的.js文件中调用按钮的绑定事件函数,其中命名新值接收子组件的数据,就是在此处用到了selectComponent, 具体写法:const child=this.selectComponent(类选择器或者id选择器),之后想获得子组件的数据有两种方法,第一种:使用setData方法,重新定义count的数值(注意在此处,不能使用this,this指的是当前页面,放在这里不合适);第二种:直接调用子组件的addCount方法

相比之下,第二种方法更简单,第一种方法相当于是重新定义数据,给数据赋值

注意selectComponent的用法,后面的括号中放的是类选择器名(.类选择器名)或者id选择器(#id选择器名)

6.behaviors

什么是behaviors

behaviors是小程序中,实现组件间代码共享的特性

包含属性、数据、生命周期函数和方法,组件想使用其中的内容时可以进行导入

组件可以引用多个behavior

behaviors的导入和挂载

使用require()方法导入需要的behavior,即通过新的变量的来接收behavior的相对路径

const myBehavior=require("../../behaviors/my-behavior")

在Component()方法中挂载,即behaviors:[文件名]

注意:在A.js文件中导入并挂载的behavior文件,需在A.wxml文件中使用

behaviors的重名

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

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

相关文章

昇思25天学习打卡营第19天|MindNLP ChatGLM-6B StreamChat

文章目录 昇思MindSpore应用实践ChatGML-6B简介基于MindNLP的ChatGLM-6B StreamChat Reference 昇思MindSpore应用实践 本系列文章主要用于记录昇思25天学习打卡营的学习心得。 ChatGML-6B简介 ChatGLM-6B 是由清华大学和智谱AI联合研发的产品&#xff0c;是一个开源的、支持…

数据结构——线性表(循环链表)

一、循环链表定义 将单链表中终端结点的指针端由空指针改为指向头结点&#xff0c;就使整个单链表形成一 个环&#xff0c;这种头尾相接的单链表称为单循环链表&#xff0c;简称循环链表(circular linked list)。 循环链表解决了一个很麻烦的问题。如何从当中一 个结点出发&am…

IO多路复用-poll的使用详解【C语言】

1.什么是poll poll 是一种用于监控多个文件描述符状态的系统调用&#xff0c;它可以等待多个文件描述符上的事件发生。它与 select 和 epoll 类似&#xff0c;但在某些场景下使用更为方便。 poll的机制与select类似&#xff0c;与select在本质上没有多大差别&#xff0c;使用…

xinput1-3.dll文件丢失找不到的修复方法

在电脑使用过程中&#xff0c;遇到“xinput1-3.dll丢失”或“找不到xinput1-3.dll”这类错误提示&#xff0c;可能会导致某些游戏或应用程序无法正常运行。以下是修复步骤&#xff0c;帮助您快速找回缺失的dll文件。 一、xinput1-3.dll的作用 xinput1-3.dll是Microsoft Direct…

Android APP 基于RecyclerView框架工程(知识体系积累)

说明&#xff1a;这个简单的基于RecyclerView的框架作用在于自己可以将平时积累的一些有效demo整合起来&#xff08;比如音视频编解码的、opengles的以及其他也去方向的、随着项目增多&#xff0c;工程量的增加&#xff0c;后期想高效的分析和查找并不容易&#xff09;&#xf…

1.Fabric框架

要了解Fabric&#xff0c;首先要知道Hyperledger开源项目。 2015年12月&#xff0c;由开源世界的旗舰组织Linux基金会牵头&#xff0c;30家初始企业成员共同宣布Hyperledger联合项目成立。Hyperledger 超级账本&#xff0c;是首个面向企业应用场景的分布式账本平台&#xff0c…

【每日一练】python编写一个简易计算器

程序代码: #循环语句&#xff0c;条件为真所以循环执行 while True: #定义两个数的变量和运算符号 num1 float(input("第一个数:")) num2 float(input("第一个数:")) syminput("选择运算符 - * /&#xff1a;") #判断运算符号 …

Camera Raw:评级和标签

在 Camera Raw 中&#xff0c;评级 Rating和标签 Label功能为摄影师和图像编辑者提供了一种高效的图像组织和管理方法。通过这些功能&#xff0c;用户可以轻松地对照片进行分类、标记和筛选&#xff0c;以便在大量图像中快速找到需要的照片。 ◆ ◆ ◆ 设置星级 Set Rating 星…

Inconsistent Query Results Based on Output Fields Selection in Milvus Dashboard

题意&#xff1a;在Milvus仪表盘中基于输出字段选择的不一致查询结果 问题背景&#xff1a; Im experiencing an issue with the Milvus dashboard where the search results change based on the selected output fields. Im working on a RAG project using text data conv…

【Java面向对象】二进制I/O

文章目录 1.二进制文件2.二进制 I/O 类2.1 FileInputStream 和 FileOutputStream2.2 FilterInputStream和 FilterOutputStream2.3 DatalnputStream 和 DataOutputStream2.4 BufferedInputStream 和 BufferedOutputStream2.5 ObjectInputStream 和 ObjectOutputStream 2.6 Seria…

防御保护课-防火墙接口配置实验

一、实验拓扑 &#xff08;我做实验用的图如下&#xff09; 二、实验要求 1.防火墙向下使用子接口分别对应生产区和办公区 2.所有分区设备可以ping通网关 三、实验思路 配IP&#xff1b; 划分vlan并配置vlan&#xff1b; 配置路由和安全策略。 四、实验配置 1、画图并…

开源模型应用落地-FastAPI-助力模型交互-进阶篇-RequestDataclasses(三)

一、前言 FastAPI 的高级用法可以为开发人员带来许多好处。它能帮助实现更复杂的路由逻辑和参数处理&#xff0c;使应用程序能够处理各种不同的请求场景&#xff0c;提高应用程序的灵活性和可扩展性。 在数据验证和转换方面&#xff0c;高级用法提供了更精细和准确的控制&#…

【Linux】进程间通信之-- 共享内存与信号量的介绍(下)

前言 上一篇&#xff0c;我们由进程间通信&#xff0c;引入并讲述了管道、匿名管道和命名管道&#xff0c;本节&#xff0c;将继续学习进程间通信的另一种方式之&#xff0c;共享内存。还要学习几个系统调用接口&#xff0c;并演示两个进程通过共享内存来进行通信。。。 目录 1…

工业控制:CANOpen(控制器局域网络)协议快速学习

文章目录 背景协议介绍CAN总线协议CANOpen协议介绍CANOpen诞生背景CANOpen的对象字典 CANOpen的服务数据对象&#xff08;SDO&#xff09; 参考附录问题CAN总线竞争原理在CAN协议中&#xff0c;帧中的ID是发送者的ID还是接收者的ID&#xff1f; 背景 目前很多CANOpen介绍的文章…

循环机制(event loop)之宏任务和微任务

一、前言 js任务分为同步任务和异步任务&#xff0c;异步任务又分为宏任务和微任务&#xff0c;其中异步任务属于耗时的任务。 二、宏任务和微任务有哪些&#xff1f; 宏任务&#xff1a;整体代码script、setTimeout、setInterval、setImmediate&#xff08;Node.js&#xff…

【ARM】SMMU系统虚拟化整理

目录 1.MMU的基本介绍 1.1 特点梳理 2.功能 DVM interface PTW interface 2.1 操作流程 2.1.1 StreamID 2.1.2 安全状态&#xff1a; 2.1.3 HUM 2.1.4 可配置的操作特性 Outstanding transactions per TBU QoS 仲裁 2.2 Cache结构 2.2.1 Micro TLB 2.2.2 Macro…

第四周:机器学习笔记

第四周学习周报 摘要Abstract机器学习任务攻略1.loss on training data1.1 training data的loss过大怎么办&#xff1f;1.2 training data的loss小&#xff0c;但是testing data loss大怎么办&#xff1f; 2. 如何选择一个中最好的模型&#xff1f;2.1 Cross Validation&#x…

知名在线市场 Etsy 允许在其平台上销售 AI 艺术品,但有条件限制|TodayAI

近日&#xff0c;以手工和复古商品著称的在线市场 Etsy 宣布&#xff0c;将允许在其平台上销售 AI 生成的艺术品。这一举措引发了广泛关注和争议。尽管 Etsy 正在接受 AI 艺术的潮流&#xff0c;但平台对这一类商品的销售设置了一些限制。 根据 Etsy 新发布的政策&#xff0c;…

mysql存储引擎和备份

索引 事务 存储引擎 概念&#xff1a;存储引擎&#xff0c;就是一种数据库存储数据的机制&#xff0c;索引的技巧&#xff0c;锁定水平。 存储引擎。存储的方式和存储的格式。 存储引擎也属于mysql当中的组件&#xff0c;实际上操作的&#xff0c;执行的就是数据的读写I/O。…

华为OD机试2024年C卷D卷 - 构成指定长度字符串的个数/字符串拼接(Java)

华为OD机试&#xff08;C卷D卷&#xff09;2024真题目录 题目描述&#xff1a;构成指定长度字符串的个数 (本题分值200) 给定 M&#xff08;0 < M ≤ 30&#xff09;个字符&#xff08;a-z&#xff09;&#xff0c;从中取出任意字符&#xff08;每个字符只能用一次&#x…