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

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选择器")获取子组件实例对象,可以直接访问子组件的任意数据和方法)(调用时,需要传入一个选择器)
①给父组件添加方法,子组件添加类
②通过父组件的方法控制子组件的属性
相关推荐
福兮说6 小时前
前端下载大文件,点了按钮半天没反应:fetch + blob 的三个问题和三种替代写法
前端·javascript·性能优化·文件下载
GreenTea6 小时前
我把 Agent 的 while 循环拆掉了:一种你可能没想到的 Agent 架构
前端·后端·架构
科技观察哨6 小时前
六足平台选型与纳米定位系统集成:HEB-640六自由度位移台在半导体光刻对准中的参数边界与国产替代评估
前端·人工智能
m0_587383006 小时前
广州24小时自助健身房解决方案实战指南与系统部署要点
java·spring·小程序·架构·需求分析
差不多的周周7 小时前
《骨架上下文:基于零镜头骨架的动作识别的骨架侧上下文提示学习》论文核心部分详解
学习
niucloud-admin7 小时前
JAVA V6 多商户商城 开发文档——web前端
前端
颜进强7 小时前
16 · NestJS LifecycleEvents 生命周期事件:五个钩子、三条边界,和 rag-server 的优雅停机
前端·后端·ai编程
Century_Dragon8 小时前
从挂图到VR:汽修专业的一堂新能源原理课可以怎么上~
学习
知识分享小能手8 小时前
C++ 学习教程,从入门到精通,C++对象和类 — 详细知识点总结(10)
开发语言·c++·学习
今年下半年8 小时前
【VUE】整合腾讯地图、自定义区域边界、村委名称及资产统计(放大显示资产点位)
前端·javascript·vue.js