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

最新推荐文章于 2024-09-11 15:23:23 发布

Wyliss

最新推荐文章于 2024-09-11 15:23:23 发布

阅读量271

点赞数

文章标签：小程序

本文链接：https://blog.csdn.net/YhWyl527/article/details/106174351

版权

封装组件
创建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) {
      // 页面尺寸变化
    }
  }
})