微信小程序【组件-组件生命周期】

封装组件
创建compoent文件

在要使用的界面Json文件中的{ "usingComponents": {} }内使用

然后在界面的wxml文件中使用

组件传值

跟vue组件传值类似 在组件内的js文件中的properties中接收

组件通信
triggerEvent
相当于vue中的 $emit

// 组件 my-component.js
Component({
  methods: {
    onTap: function(){
      this.triggerEvent('customevent', {}) // 只会触发 pageEventListener2
      this.triggerEvent('customevent', {}, { bubbles: true }) // 会依次触发 pageEventListener2 、 pageEventListener1
      this.triggerEvent('customevent', {}, { bubbles: true, composed: true }) // 会依次触发 pageEventListener2 、 anotherEventListener 、 pageEventListener1
    }
  }
})

使用----------------------------------------------------------------------

组件的生命周期

组件所在页面的生命周期

Component({
  pageLifetimes: {
    show: function() {
      // 页面被展示
    },
    hide: function() {
      // 页面被隐藏
    },
    resize: function(size) {
      // 页面尺寸变化
    }
  }
})