您的当前位置:首页正文

微信小程序自定义组件Component

2024-12-01 来源:个人技术集锦
Component({

  // 一些选项
  options: {
    // 样式隔离:apply-shared 父影响子,shared父子相互影响, isolated相互隔离
    styleIsolation:"isolated",
    // 允许多个插槽
    multipleSlots: true
  },

  // 组件的对外属性:在 properties 定义段中,属性名采用驼峰写法(propertyName);在 wxml 中,指定属性值时则对应使用连字符写法(property-name="")
  properties: {},

  // 组件的内部数据
  data: {},

  // 类似于 mixins 和 traits 的组件间代码复用机制
  behaviors: [],

  // 组件数据字段监听器,用于监听 properties 和 data 的变化
  observers:{},

  // 组件间关系定义
  relations: {},

  // 通过组件的外部类实现父组件控制子自己的样式
  externalClasses: [],

  // 组件生命周期声明对象
  lifetimes: {
    attached(){},
    moved(){},
    detached(){}
  },

  // 组件所在页面的生命周期声明对象
  pageLifetimes: {
    show(){},
    hide(){},
    resize(){}
  },

  /**
   * 在组件实例刚刚被创建时执行。
   * 组件实例刚刚被创建好时, created 生命周期被触发。此时,组件数据 this.data 就是在 Component 构造器中定义的数据 data。 此时还不能调用 setData 。 通常情况下,这个生命周期只应该用于给组件 this 添加一些自定义属性字段
   */
  created(){},

  /**
   * 在组件实例进入页面节点树时执行
   * 在组件完全初始化完毕、进入页面节点树后, attached 生命周期被触发。此时, this.data 已被初始化为组件的当前值。这个生命周期很有用,绝大多数初始化工作可以在这个时机进行  
   */ 
  attached(){},

  /**
   * 在组件在视图层布局完成后执行
   */
  ready(){},

  /**
   * 在组件实例被移动到节点树另一个位置时执行
   */
  moved() {},

  /**
   * 在组件实例被从页面节点树移除时执行
   * 在组件离开页面节点树后, detached 生命周期被触发。退出一个页面时,如果组件还在页面节点树中,则 detached 会被触发
   */ 
  detached() {},

  /**
   * 每当组件方法抛出错误时执行
   */
  error(){},

  /**
   * 组件的方法,包括事件响应函数和任意的自定义方法
   */
  methods: {
    _initialize() {}
  }
})

显示全文