小程序学习day11-生命周期函数、组件所在页面的生命周期、自定义组件的插槽、自定义组件的父子通信

news2024/11/13 9:04:58

40、自定义组件(续)(续)

(10)生命周期函数

1)小程序里的全部生命周期函数
        ①created(在组件刚被创建时执行)(被创建,但未被放入页面):无参数
        ②attached(在徐建实例进入到页面节点树时执行)(进入页面,但未渲染):无参数
        ③ready(在组建在视图布局完成以后执行)(已被渲染完成):无参数
        ④moved(在组件实例被移动到节点树的另一个位置时执行):无参数
        ⑤detached(在组件实例被从页面移除时执行):无参数
        ⑥error(每当组件方法抛出错误时执行):参数为Objedct Error
2)主要的生命周期函数及其特点
        ①created(组件实例刚被创建好时触发)(此时不能调用setData)(通常在此时,仅能用于给组件添加一些自定义的属性字段)
        ②attached(在组件完全初始化完毕,进入页面节点树以后,被触发)(此时,this.data已经初始化完毕)(在这时,可以进行绝大数的初始化工作,比如:发送请求)
        ③detached(在组件离开页面节点树以后触发)(退出一个页面,触发页面每个自定义组件的detached函数)(此时,适合做一些清理性质的工作)
3)如何创建生命周期函数
①旧方法(类似于vue)

语法:生命周期函数(){}

②新方法

Lifetimes:{

生命周期函数(){}

}

(11)组件所在页面的生命周期(自定义组件的行为依赖于页面的变化)

1)组件所在页面的生命周期函数
        ①show(组件所在页面被展示时执行):无参数
        ②hide(组件所在页面被隐藏时执行):无参数
        ③resize(组件所在页面尺寸变化时执行):Object Size
2)语法:

        pageLifetimes:{

                show(){},

                hide(){},

                resize(){}

        }

(12)自定义组件的插槽(在自定义组件的wxml中,提供slot节点)

1)作用:用于承担组件使用者提供的wxml结构
2)单个插槽(在小程序中,默认每个自定义组件只允许使用一个插槽占位)
应用:
①在组件wxml通过slot占位

②在使用页面wxml中通过view填入想要写的内容

3)多个插槽
①在对应组件的js中开启允许多个插槽的设置

②通过name给插槽命名,便于区别

③使用(通过slot=””)

(13)自定义组件的父子通信

1)父子通信的方式
        ①属性绑定(用于父组件向子组件的指定属性设置数据,仅能设置JSON兼容的数据)
        ②事件绑定(用于子组件向父组件传递数据,可以传递任何数据)
        ③获取组件实例(父组件还可以通过this.selectComponent()获取子组件实例对象,可以直接访问子组件的任意数据和方法)
2)属性绑定(父传子)(只能传递普通类型的数据,无法将方法传递给子组件)(子组件通过properties节点声明对应的属性并使用)
        ①父组件提供数据

        ②父组件传递数据

        ③子组件在properties中接收

        ④在子组件中使用

3)事件绑定(子传父)

已知:

子组件中无法同步修改父组件传过来的值

①在父组件的js中,定义一个函数,这个函数即将通过自定义事件的形式,传递给子组件

②在父组件wxml中,通过自定义事件的形式,引用①中的自定义函数,传递给子组件

③在子组件的js中,通过调用this.triggerEvent(‘自定义事件名称’,{/*参数对象*/}),将数据传递给父组件

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

传参:

调用:

⑤使用(同步父组件的值)

4)获取组件实例(父组件还可以通过this.selectComponent(“id或class选择器”)获取子组件实例对象,可以直接访问子组件的任意数据和方法)(调用时,需要传入一个选择器)
①给父组件添加方法,子组件添加类

②通过父组件的方法控制子组件的属性

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

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

相关文章

【AD9361 数字基带】多片基带内FPGA补偿 I/Q Rotation

I/Q 旋转 Rotation 在许多多通道射频系统中,如 AD-FMCOMMS5,甚至在 AD-FMCOMMS2、AD-FMCOMMS3 上,都需要测量或校正两个复数 (I/Q) RF 信号之间的相位差。 从纯粹的数学描述来看,单个正弦波没有相位&…

NNG简介和使用总结

先认识下ZeroMQ 参考:ZeroMQ详解 - 南哥的天下 - 博客园 (cnblogs.com) ZeroMQ(简称ZMQ)是一个基于消息队列的多线程网络库,其对套接字类型、连接处理、帧、甚至路由的底层细节进行抽象,提供跨越多种传输协议的套接字。…

RK3568开发笔记-buildroot系统scp拷贝文件报错dbclient no such file or directory

目录 ​​​​​​​ 前言 一、问题分析 什么是 Dropbear Dropbear 的优点 二、解决办法 总结 前言 在使用RK3588开发板进行系统开发时,很多开发者会选择使用Buildroot来构建自己的定制化系统。在开发过程中,通常需要通过scp(Secure Copy Protocol)命令将文件从本地计…

IDEA工具设置默认使用maven的settings.xml文件

第一步:打开idea工具,选中 File ——> New Projects Setup ——> Settings for New Projects 第二步:先设置下自动构建项目这个选项 第三步:选中 Build Tools ——> Maven,让后就可以设置自己安转的maven和se…

xlsx表格-A列的值需要从C列中匹配到然后输出C列旁边D列的值,怎么写公式?

公式: IFERROR(VLOOKUP(A1, C:D, 2, FALSE), "") 解释: 在VLOOKUP函数中,2表示要返回的列的索引。具体来说,VLOOKUP函数的语法如下: VLOOKUP(lookup_value, table_array, col_index_num, [range_lookup])…

功能测试和性能测试区别简析,软件测试公司如何开展有效测试?

软件功能测试旨在验证软件是否按照需求和设计规范正常运行,软件性能测试则是用来评估软件在特定负载条件下的行为和响应时间,确保软件在高并发和高需求的环境中能够稳定运行。 虽然两者都属于软件测试的重要组成部分,但它们的目的和重点却有…

零基础5分钟上手谷歌云GCP - 服务器自动扩展

简介 欢迎来到小李哥谷歌云GCP云计算知识学习系列,适用于任何无云计算或者谷歌云技术背景的开发者,让大家零基础5分钟通过这篇文章就能完全学会谷歌云一个经典的服务开发架构方案。 我将每天介绍一个基于全球三大云计算平台(AWS, Azure, GC…

改编版猜数字小游戏,猜错了就黑屏(整蛊版本)

1. 前情提要 在前一篇博客中,我们了解到了如何获得随机数,并且通过运算可以规定所获得的这个随机数的范围在多少数值之间 那么接下来我们就需要去具体去实现猜数字游戏的各种布置 2. 布置主菜单 玩一个游戏,最开始的界面都会是一个主菜单…

iPhone13手机照片被误删,有什么方法可以恢复吗?

在日常使用手机时,我们可能因为误操作、手机崩溃、或者其他原因,导致iPhone13手机中的照片丢失。遇到这种情况,手机误删照片如何恢复?在本文中,我们将分享3个妙招,帮助您恢复iPhone13上误删的照片。 一、通…

2024年第二季度SSD出货量下滑18.4%,降至6750万部,但容量增长4.1%至90.6EB

2024年第二季度SSD Exabytes实现连续季度增长 仅企业级PCIe SSD有所增长:尽管所有其他类别均出现下滑,但企业级PCIe SSD的增长是由其所有终端市场需求增加所驱动的。总体SSD出货量:总体SSD出货量环比下降18.4%,降至6750万部&…

Leetcode JAVA刷刷站(76)最小覆盖子串

一、题目概述 二、思路方向 为了解决这个问题,我们可以使用滑动窗口的方法。滑动窗口是数组/字符串问题中常用的一个技巧,特别是用于寻找子数组或子字符串的问题。 这里的关键是,我们需要知道字符串t中每个字符的出现次数,并在遍…

【Python】函数高阶【上】

本篇文章将讲解函数高阶部分: (1)函数的嵌套 (2)闭包 (3)装饰器 1、函数的嵌套 Python是以函数为作用域,在作用域中定义的相关数据只能被当前作用域或子作用域使用。 &#xf…

(QT-UI)十四、在时间轴上绘制一段段时间片

本系列预计实现 ①刻度上方文字显示, ②时间轴拖动效果, ③时间轴刻度缩放, ④时间轴和其他控件联动显示, ⑤鼠标放置到时间轴,显示具体时间。 ⑥通过定时器,实时更新时间轴 ⑦时间轴上绘制时间片 完…

PostgreSQL11 | 事务处理与并发控制

PostgreSQL11 | 事务处理与并发控制 本文章代码已在pgsql11.22版本上运行且通过,展示页由pgAdmin8.4版本提供,本文章第一次采用md文档,效果比csdn官方富文本编辑器好用,以后的文章都将采用md文档 事务管理简介 事物是pgsql中的…

自己动手写CPU_step2_构建SOPC

ROM实现指令寄存器 上一篇中实现的五级流水线需要一个输入,这个输入是指令数据,而指令数据是通过取指阶段的PC控制的,PC会一直循环的取指令。 指令寄存器实现: //指令寄存器 module inst_rom(input clk,inp…

【C++ Primer Plus习题】2.1

问题: 解答: #include <iostream> using namespace std;int main() {cout << "在下国林!" << endl;cout << "家住天府之国!" << endl;return 0; }运行结果: 考查点: 预处理头文件命名空间main函数c的标准输出和换行字符…

机器学习/数据分析--通俗语言带你入门K-邻近算法(结合案例)

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 前言 机器学习是深度学习和数据分析的基础&#xff0c;接下来将更新常见的机器学习算法注意&#xff1a;在打数学建模比赛中&#xff0c;机器学习用的也很多&a…

初识Linux · yum和vim

目录 前言&#xff1a; 1 yum 1.1 yum是什么&#xff1f; 1.2 Centos的生态和yum的本地配置 1.3 yum的相关操作 2 vim 前言&#xff1a; 我们学习Linux的时候&#xff0c;是有编程语言的基础的&#xff0c;那么呢&#xff0c;我们学习Linux的时候最迫切的就是希望能打印…

Flat Ads:全球金融应用现状与发展趋势深度解析

随着全球数字化进程的加速,金融科技(FinTech)应用正逐渐成为现代生活不可或缺的一部分。从移动银行到数字支付,再到智能理财工具,金融应用正在重新定义传统金融服务的边界,并推动行业的深刻变革。 本篇文章 Flat Ads 将从全球视角出发,深入剖析当前金融应用市场的现状,探讨未来…

开关电源测试系统方案:系统结构功能、特点、测试项目

为了应对开关电源测试中的复杂挑战&#xff0c;我们推出了NSAT-8000系列开关电源ate测试系统&#xff0c;它以其全面的功能和灵活性&#xff0c;适应了电源产品测试场景&#xff0c;解决了测试难题。 开关电源测试系统 NSAT-8000系列之开关电源测试系统适用于AC/DC和DC/DC开关电…