小程序学习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选择器")获取子组件实例对象,可以直接访问子组件的任意数据和方法)(调用时,需要传入一个选择器)
①给父组件添加方法,子组件添加类
②通过父组件的方法控制子组件的属性
相关推荐
bearpping2 小时前
Nginx 配置:alias 和 root 的区别
前端·javascript·nginx
淮北4942 小时前
vim学习进阶
学习·编辑器·vim
@大迁世界2 小时前
07.React 中的 createRoot 方法是什么?它具体如何运作?
前端·javascript·react.js·前端框架·ecmascript
January12072 小时前
VBen Admin Select 选择框选中后仍然显示校验错误提示的解决方案
前端·vben
. . . . .2 小时前
前端测试框架:Vitest
前端
xiaotao1312 小时前
什么是 Tailwind CSS
前端·css·css3
sayang_shao3 小时前
ARM架构运行模式学习笔记
arm开发·学习·架构
战南诚3 小时前
VUE中,keep-alive组件与钩子函数的生命周期
前端·vue.js
发现一只大呆瓜3 小时前
React-彻底搞懂 Redux:从单向数据流到 useReducer 的终极抉择
前端·react.js·面试