小程序组件生命周期和获取组件实例

组件实例

1 `selectComponent` 方法概述

selectComponent 是微信小程序提供的一个 API，用于在页面或组件内部获取子组件的实例。通过获取组件实例，可以：

• 调用组件内部的方法；
• 访问组件的内部数据；
• 进行组件间的通信；

2 语法

// selector：选择器，支持传入组件的 id（使用 # 号）或组件的自定义标签名。
  const componentInstance = this.selectComponent(selector);
  if (componentInstance ) {
    componentInstance .sayHello();
  } else {
    console.error('未找到嵌套的子组件实例');
  }

组件生命周期

Component({
  // 定义组件的属性
  properties: {
    title: {
      type: String,
      value: '默认标题' // 默认值
    }
  },
  data: {
    // 组件内部数据
    initialized: false, // 用于跟踪是否初始化完成
    readyTimestamp: null // 用于记录组件 ready 的时间戳
  },
  
  // 生命周期函数
  lifetimes: {
    // 创建时调用
    created() {
      console.log('组件实例已创建');
   // 调用函数是用this
    this.customizefn('hello')

      // 初始化内部数据
      this.setData({
        initialized: true
      });
    },

    // 添加到节点树时调用
    attached() {
      console.log('组件已进入页面节点树');
      // 这里可以进行数据请求或与页面进行数据交互
    },

    // 渲染完成时调用
    ready() {
      console.log('组件已准备完毕');
      // 记录 ready 的时间戳
      this.setData({
        readyTimestamp: Date.now()
      });
    },

    // 移动时调用
    moved() {
      console.log('组件已被移动');
      // 处理组件被移动后的逻辑（较少用）
    },

    // 移除时调用
    detached() {
      console.log('组件已从页面中移除');
      // 这里可以进行一些清理工作，如清除定时器
    },

    // 捕获错误时调用
    error(err) {
      console.error('组件发生错误：', err);
      // 可以进行错误处理或上报
    }
  }
    // 自定义函数
   customizefn(val) {
    this.triggerEvent('val', val);
  }
});