小程序学习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 分钟前
Reactive编程入门:Project Reactor 深度指南
前端·javascript·python·react.js·django·前端框架·reactjs
莲华君8 分钟前
React快速上手:从零到项目实战
前端·reactjs教程
百锦再8 分钟前
React编程高级主题:测试代码
android·前端·javascript·react.js·前端框架·reactjs
易安说AI20 分钟前
Ralph Loop 让Claude无止尽干活的牛马...
前端·后端
盐焗西兰花1 小时前
鸿蒙学习实战之路-Reader Kit修改翻页方式字体大小及行间距最佳实践
学习·华为·harmonyos
2501_916008891 小时前
全面介绍Fiddler、Wireshark、HttpWatch、SmartSniff和firebug抓包工具功能与使用
android·ios·小程序·https·uni-app·iphone·webview
webYin1 小时前
解决 Uni-App 运行到微信小程序时 “Socket合法域名校验出错” 问题
微信小程序·小程序·uni-app
QiZhang | UESTC2 小时前
学习日记day76
学习
久邦科技2 小时前
20个免费电子书下载网站,实现电子书自由(2025持续更新)
学习
Gain_chance2 小时前
34-学习笔记尚硅谷数仓搭建-DWS层最近一日汇总表建表语句汇总
数据仓库·hive·笔记·学习·datagrip