小程序学习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选择器")获取子组件实例对象,可以直接访问子组件的任意数据和方法)(调用时,需要传入一个选择器)
①给父组件添加方法,子组件添加类
②通过父组件的方法控制子组件的属性
相关推荐
数字芯片实验室5 小时前
分享一个可以学习正则表达式的网址:Pythex.org
学习·正则表达式
陈洪奇5 小时前
注册中心学习笔记整理
笔记·学习
一斤代码5 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子5 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年6 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子6 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina6 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路7 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说7 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409197 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app