小程序学习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选择器”)获取子组件实例对象，可以直接访问子组件的任意数据和方法）（调用时，需要传入一个选择器）

①给父组件添加方法，子组件添加类

②通过父组件的方法控制子组件的属性