小程序-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…

如何看待“微软蓝屏”冲上热搜,Windows系统电脑死机?

微软蓝屏事件席卷全球,Windows系统遭遇重大挑战 近日,一则关于微软蓝屏的新闻在各大社交媒体平台上迅速传开,并登上热搜榜首。全球多地报告称Windows系统电脑出现死机、蓝屏现象,引发了广泛关注。 一、事件概述 据报道,此次微软蓝屏事件始于当地时间2024年7月19日,美国…

vs code中多个c文件的编译、调试,对应的task.json/launch.json文件的设置

目录 0. 容易犯的错误 1. 编译&#xff1a;需要修改原始task.json文件&#xff0c;修改处用加粗表示 2. 调试&#xff1a;需修改launch.json文件 3. 完整配置流程参考 0. 容易犯的错误 注意&#xff0c;不能在同一个文件夹下写两个都包含main()函数的.c文件&#xff0c;这会…

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

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

oops使用笔记

oops-plugin-excel-to-json 使用 gitee上的文档图片不可见 参考 > https://forum.cocos.org/t/topic/156800 配置&#xff0c;打开“项目设置”,拖动到最下面&#xff0c;有一个"Excel to Json",前3项采用默认配置吧Excel, 默认的Excel目录是与assets平级的excel目…

如何确定企业信息系统的安全保护等级

确定企业信息系统的安全保护等级通常需要考虑以下几个方面&#xff1a; 1. 业务信息安全 - 系统所处理的业务数据的重要性、敏感性和保密性。例如&#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…

Oracle 12c新特性 In-Memory Column Store

Oracle 12c引入了一项重要的特性——In-Memory Column Store&#xff08;简称IM或In-Memory&#xff09;&#xff0c;这一特性极大地提升了数据库在处理分析型查询时的性能。以下是关于Oracle 12c In-Memory特性的详细介绍&#xff1a; 一、基本概念 In-Memory Column Store&…

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;") #判断运算符号 …

防火墙的经典体系结构及其具体结构

防火墙的经典体系结构及其具体结构 防火墙是保护计算机网络安全的重要设备或软件&#xff0c;主要用于监控和控制进出网络流量&#xff0c;防止未经授权的访问。防火墙的经典体系结构主要包括包过滤防火墙、状态检测防火墙、代理防火墙和下一代防火墙&#xff08;NGFW&#xf…

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…

解决Element UI 表格组件懒加载数据刷新问题

一、问题描述 element ui的table组件设置成懒加载时&#xff0c;遇到数据表格需要更新、删除等操作&#xff0c;子节点不会自动更新。 二、解决思路 刷新数据&#xff0c;就是重新调用load&#xff08;&#xff09;&#xff0c;通过map记录已展开的节点&#xff0c;需要刷新…