小程序学习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选择器")获取子组件实例对象,可以直接访问子组件的任意数据和方法)(调用时,需要传入一个选择器)
①给父组件添加方法,子组件添加类
②通过父组件的方法控制子组件的属性
相关推荐
2501_91510632几秒前
iOS 安装了证书,HTTPS 还是抓不到
android·网络协议·ios·小程序·https·uni-app·iphone
Hcoco_me2 分钟前
大模型面试题37:Scaling Law完全指南
人工智能·深度学习·学习·自然语言处理·transformer
龘龍龙8 分钟前
Python基础学习(十)
服务器·python·学习
im_AMBER9 分钟前
Leetcode 95 分割链表
数据结构·c++·笔记·学习·算法·leetcode·链表
A9better9 分钟前
嵌入式开发学习日志47——任务创建与就绪列表
单片机·嵌入式硬件·学习
青茶36010 分钟前
【js教程】如何用jq的js方法获取url链接上的参数值?
开发语言·前端·javascript
北岛寒沫10 分钟前
北京大学国家发展研究院 经济学原理课程笔记(第十八课 国内生产总值与物价水平)
经验分享·笔记·学习
qq_1601448722 分钟前
低成本高效学习路线图
学习
航Hang*22 分钟前
第七章:综合布线技术 —— 设备间子系统的设计与施工
网络·笔记·学习·期末·复习
脩衜者25 分钟前
极其灵活且敏捷的WPF组态控件ConPipe 2026
前端·物联网·ui·wpf