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

news2024/9/21 4:24:40

目录

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.coloradmin.cn/o/1935881.html

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

相关文章

stm32入门-----EXTI外部中断(下——实践篇)

目录 前言 一、硬件介绍 1.对射红外线传感器 2.旋转编码器 二、EXTI外部中断C编程 1.开启RCC时钟 2.配置GPIOK口初始化 3.配置AFIO 4.配置EXIT 5.配置NVIC 三、EXIT外部中断项目实操 1.对射红外传感器计数 2.选择编码器计数 前言 本期接着上一期的内容继续学习stm3…

AutoMQ 生态集成 Redpanda Console

通过 Kafka Web UI 更加便利地管理 Kafka/AutoMQ 集群 随着大数据技术的飞速发展&#xff0c;Kafka 作为一种高吞吐量、低延迟的分布式消息系统&#xff0c;已经成为企业实时数据处理的核心组件。然而&#xff0c;Kafka 集群的管理和监控却并非易事。传统的命令行工具和脚本虽…

Java流的概念及API

流的概念 流&#xff08;Stream)的概念代表的是程序中数据的流通&#xff0c;数据流是一串连续不断的数据的集合。在Java程序中&#xff0c;对于数据的输入/输出操作是以流(Stream)的方式进行的。可以把流分为输入流和输出流两种。程序从输入流读取数据&#xff0c;向输出流写入…

Python项目打包与依赖管理指南

在Python开发中&#xff0c;python文件需要在安装有python解释器的计算机的电脑上才能运行&#xff0c;但是在工作时&#xff0c;我们需要给客户介绍演示项目功能时并不一定可以条件安装解释器&#xff0c;而且这样做非常不方便。这时候我们可以打包项目&#xff0c;用于给客户…

《驾驭AI浪潮:伦理挑战与应对策略》

AI发展下的伦理挑战&#xff0c;应当如何应对&#xff1f; 人工智能飞速发展的同时&#xff0c;也逐渐暴露出侵犯数据隐私、制造“信息茧房”等种种伦理风险。随着AI技术在社会各个领域的广泛应用&#xff0c;关于AI伦理和隐私保护问题日趋凸显。尽管国外已出台系列法规来规范…

达梦数据库DM8-索引篇

目录 一、前景二、名词三、语法1、命令方式创建索引1.1 创建索引空间1.2.1 创建普通索引并指定索引数据空间1.2.2 另一种没验证&#xff0c;官方写法1.3 复合索引1.4 唯一索引1.5 位图索引1.6 函数索引 2、创建表时候创建索引3、可视化方式创建索引3.1 打开DM管理工具3.2 找到要…

nginx负载均衡实例

实现效果 浏览器输入地址http://nginx服务器ip(:80)/edu/a.html&#xff0c;实现负债均衡效果&#xff0c;平均分配到 服务器ip:8080和 服务器ip:8081进程中。 准备工作 准备两个tomcat&#xff0c;一个监听在8080端口&#xff0c;一个监听在8081端口。也可以准备多个tomcat。…

如何在电脑上演示手机上APP,远程排查移动端app问题

0序&#xff1a; 对接客户&#xff0c;给领导演示移动端产品&#xff0c;或者远程帮用户排查移动端产品的问题。都需要让别人能够看到自己在操作手机。 会议室可以使用投屏&#xff0c;但需要切换电脑和手机。 排查问题经常都是截图、或者手机上录制视频&#xff0c;十分繁琐…

node-red学习

Node-RED : 起步 1、安装nodejs Node.js — 在任何地方运行 JavaScript 验证 2、更换下载源 // 查看当前下载地址 npm config get registry // 设置淘宝镜像的地址 npm config set registry https://registry.npmmirror.com/ // 查看当前的下载地址 npm config get registry…

抖音矩阵系统源码开发部署流程分享

#短视频矩阵源码 #短视频矩阵 #源码交付 抖音矩阵系统源码开发部署流程如下&#xff1a; 环境配置&#xff1a;首先&#xff0c;需要安装并配置开发环境&#xff0c;包括安装Java JDK、MySQL数据库、Eclipse开发工具等。 数据库设计&#xff1a;根据抖音矩阵系统的需求&…

安全入门day01

一、常用名词 1、前后端 &#xff08;1&#xff09;前端 前端主要负责用户界面的展示和交互。它通常包括HTML、CSS和JavaScript等技术的使用&#xff0c;也可能使用各种前端框架和库&#xff0c;如React、Vue.js、Angular等&#xff0c;来构建更加复杂和动态的用户界面。前端…

Flowable的学习一

今日项目用到了Flowable。简单记录下。 学习中 参考了网上资料&#xff1a; 工作流-Activiti7-基础讲解_activity工作流-CSDN博客 https://juejin.cn/post/7158342433615380517 flowable实战&#xff08;九&#xff09;flowable数据库表中流程实例、活动实例、任务实例三者…

Windows系统如何本地部署Ollama并运行千文qwen大模型详细教程

文章目录 前言1. 运行Ollama2. 安装Open WebUI2.1 在Windows系统安装Docker2.2 使用Docker部署Open WebUI 3. 安装内网穿透工具4. 创建固定公网地址 前言 本文主要介绍如何在Windows系统快速部署Ollama开源大语言模型运行工具&#xff0c;并安装Open WebUI结合cpolar内网穿透软…

Unity动画系统(4)

6.3 动画系统高级1-1_哔哩哔哩_bilibili p333- 声音组件添加 using System.Collections; using System.Collections.Generic; using UnityEngine; public class RobotAnimationController : MonoBehaviour { [Header("平滑过渡时间")] [Range(0,3)] publ…

java文本比较解决方案

参考资料 VBA计算页码和行号https://learn.microsoft.com/zh-cn/office/vba/api/word.wdinformation 概述&#xff1a; 最近在做word文档对比的&#xff0c;总结了几种解决方案&#xff0c;记录一下 在java中&#xff0c;常用的文本对比方案有如下几种&#xff1a; 差异比较…

Git分支合并以及分支部分合并 提交记录合并

Git分支合并,以及分支部分合并,提交记录合并 最近工作中用到git分支合并的场景,记录一下. 分支整体合并,合并所有记录 仅合并分支部分代码

【Django】网上蛋糕商城后台-类目管理

1.类目管理列表实现 当管理员进入后台管理后&#xff0c;点击类目管理&#xff0c;向服务器发出请求 path(admin/type_list/,viewsAdmin.type_list), # 处理商品分类管理列表请求 def type_list(request):# 读取分页页码try:ym request.GET["ym"]except:ym 1# 查…

Leetcode算法题(链表的中间节点+返回倒数第k个节点+合并两个有序链表)

题目1&#xff1a; 本题力扣链接&#xff1a;https://leetcode.cn/problems/middle-of-the-linked-list/solutions/164351/lian-biao-de-zhong-jian-jie-dian-by-leetcode-solut/ 思路1&#xff1a;单指针法 首先我们对链表进行遍历&#xff0c;记录链表的总长度N&#xff0c;…

Postgresql导入几何数据的几种方式

postgis方式导入 1.直接使用postgis客户端方式导入 首先&#xff0c;电脑要安装postgresql和对应版本的postgis。然后通过postgis客户端软件连接到postgresql数据库。然后导入。具体详细操作如下所示&#xff1a; 第一步&#xff1a;首先要再postgis中创建数据库 Create da…

【Linux取经之路】Linux常见指令

目录 基本指令 常见指令 1&#xff09;ls —— 对于目录&#xff0c;列出该目录下的所有子目录和文件&#xff1b;对于文件&#xff0c;将列出文件名及其他信息 2&#xff09;pwd —— 显示当前所在的目录 ​编辑 3&#xff09;cd —— 切换到指定路径下 4&#xff09;t…