Component constructor

The Component constructor can be used to define components, and when you call the Component constructor, you can specify the properties, data, methods, and so on of the component.

Refer to the Component reference documentation for detailed parameter meaning and use.

Component({

  behaviors: [],

  properties: {
    myProperty: { // 属性名
      type: String,
      value: ''
    },
    myProperty2: String // 简化的定义方式
  },
  
  data: {}, // 私有数据，可用于模板渲染

  lifetimes: {
    // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
    attached: function () { },
    moved: function () { },
    detached: function () { },
  },

  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  attached: function () { }, // 此处attached的声明会被lifetimes字段中的声明覆盖
  ready: function() { },

  pageLifetimes: {
    // 组件所在页面的生命周期函数
    show: function () { },
    hide: function () { },
    resize: function () { },
  },

  methods: {
    onMyButtonTap: function(){
      this.setData({
        // 更新属性和数据的方法与更新页面数据的方法类似
      })
    },
    // 内部方法建议以下划线开头
    _myPrivateMethod: function(){
      // 这里将 data.A[0].B 设为 'myPrivateData'
      this.setData({
        'A[0].B': 'myPrivateData'
      })
    },
    _propertyChange: function(newVal, oldVal) {

    }
  }

})

Use the Component constructor to construct a page

In fact, pages of small programs can also be considered custom components. A s a result, pages can also be constructed using the Component constructor, with the same definition segments and instance methods as normal components. At this point, however, the corresponding json file is required to contain the usingComponents definition segment.

At this point, the properties of the component can be used to receive parameters for the page, such as accessing the page /pages/index/index?paramA=123 and paramB=xyz, which are assigned a value of 123 or xyz if the property param para or xyz is declared.

The lifecycle method of the page, which is the method that begins on, should be written in the methods definition segment.

Code example:

{
  "usingComponents": {}
}

Component({

  properties: {
    paramA: Number,
    paramB: String,
  },

  methods: {
    onLoad: function() {
      this.data.paramA // 页面参数 paramA 的值
      this.data.paramB // 页面参数 paramB 的值
    }
  }

})

One benefit of using the Component constructor to construct a page is that you can use behaviors to extract snippy code common to all pages.

For example, you can extract the same piece of code into behaviors when all pages are created and destroyed.

Code example:

// page-common-behavior.js
module.exports = Behavior({
  attached: function() {
    // 页面创建时执行
    console.info('Page loaded!')
  },
  detached: function() {
    // 页面销毁时执行
    console.info('Page unloaded!')
  }
})

// 页面 A
var pageCommonBehavior = require('./page-common-behavior')
Component({
  behaviors: [pageCommonBehavior],
  data: { /* ... */ },
  methods: { /* ... */ },
})

// 页面 B
var pageCommonBehavior = require('./page-common-behavior')
Component({
  behaviors: [pageCommonBehavior],
  data: { /* ... */ },
  methods: { /* ... */ },
})