【微信小程序】组件的生命周期及自定义组件

文章目录

• ​​组件的生命周期​​

• ​​自定义组件的生命周期函数​​

• ​​执行顺序​​
• ​​组件常用的生命周期函数​​
• ​​lifetimes节点​​

• ​​组件所在页面的生命周期函数​​

• ​​pageLifetimes节点​​

• ​​自定义组件​​

• ​​创建自定义组件​​

• ​​创建组件​​
• ​​定义组件​​
• ​​使用组件​​

• ​​父组件向子组件传递数据​​
• ​​子组件向父组件传递数据​​
• ​​其他定义段与示例方法​​

组件的生命周期

组件的生命周期，指的是组件自身的一些函数，这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发。
其中，最重要的生命周期是 created、attached、 detached ，包含一个组件实例生命流程的最主要时间点。

自定义组件的生命周期函数

小程序组件可用的全部生命周期如下表所示:

执行顺序

从该图中可以看出组件的 ready 与 detached 执行顺序并没有明确的先后关系。

组件常用的生命周期函数

在小程序组件中，最重要的生命周期函数有3个，分别是​​created​​​、​​attached​​​.
​​​detached​​。它们各自的特点。如下︰

• 组件实例刚被创建好的时候，created生命周期函数会被触发
  此时还不能调用setData，通常在这个生命周期函数中，只应该用于给组件的this添加一些自定义的属性字段在组件
• 完全初始化完毕、进入页面节点树后，attached生命周期函数会被触发
  此时, this.data已被初始化完毕。这个生命周期很有用，绝大多数初始化的工作可以在这个时机进行（例如发请求获取初始数据)
• 在组件离开页面节点树后，detached生命周期函数会被触发
  退出一个页面时，会触发页面内每个自定义组件的detached生命周期函数此时适合做一些清理性质的工作

lifetimes节点

在小程序组件中，生命周期函数可以直接定义在Component构造器的第一级参数中，可以在 lifetimes字段内进行声明（这是推荐的方式，其优先级最高）。如下:

Component({
  lifetimes:{
     created(){
         console.log('created');
     },
     attached(){
         console.log('attached');
     }
  }
)}

注意：若不写在lifetime节点中且同时存在lifetime节点，优先执行lifetime节点中的生命周期函数，并覆盖掉节点之外的生命周期函数。

组件所在页面的生命周期函数

有时，自定义组件的行为依赖于页面状态的变化，此时就需要用到组件所在页面的生命周期。
在自定义组件中，组件所在页面的生命周期函数有如下3个，分别是:

pageLifetimes节点

组件所在页面的生命周期函数，需要定义在pageLifetimes节点中，如下:

Component({
   pageLifetimes:{
         show(){
           console.log("show!!");
       },
       hide(){
           console.log("hide!!");
       },
       resize(){
           console.log("resize");
       }                  
   }            
)}

当页面显示和隐藏时触发

自定义组件

类似vue或者react中的自定义组件。
微信小程序也 允许我们使用自定义组件的方式来构建页面。

当我们在开发小程序页面时，少不了哪些重复或类似的板块，需要我们复制粘贴一份源码进行编写，而组件恰恰解决了这个问题，它能让我们的代码复用率更高。开发更如鱼得水。

创建自定义组件

类似于页面，一个自定义组件由 ​​.json​​​ ​​.wxml​​​ ​​.wxss​​​ ​​.js​​ 4个文件组成。

创建组件

可以在微信开发者工具中快速创建组件的文件结构。如图

创建好之后，便出现四个文件：如图

定义组件

此时我们新建一个页面-demo，在demo.json中可以使用刚才我们创建好的组件。

使用组件

首先让效果更明显，我们在组件的wxml文件中写入一些东西：

之后我们在页面demo.wxml中使用我们的组件：

出现如上效果则说明我们声明的组件已经被使用了

父组件向子组件传递数据

2. 父组件(页面)向子组件传递数据通过标签属性的方式来传递



4. 在子组件的.js文件上进行接收



5. 注意：若父组件给子组件不传值时则使用value中定义的值。
7. 在SuHeader.wxml中接收数据即可

子组件向父组件传递数据

2. 给地址绑定鼠标单击事件



4. 当单击事件被触发。给通过​​this.triggerEvent​​绑定父组件的自定义事件并且给父组件传递数据



6. 父组件的自定义事件



8. 在demo.js文件中触发父组件的自定义事件，注意与data配置项平级。



10. 触发单击响应事件

其他定义段与示例方法

详情可见官方文档：​​Component(Object object)​​