# Component Constructor

Component Constructor can be used to define components, call the Component Constructor can specify properties, data, methods, and so on for a component.

Please refer to the detailed meaning and use of parameters Component Reference documents。

Component({

  behaviors: [],

  properties: {
    myProperty:  { // Attribute name
      type: String,
      value: ''
    },
    myProperty2:  String // A simplified definition
  },
  
  data: {}, // Private data that can be used for template rendering

  lifetimes: {
    // Life periodic function, which can be either a function or a method name defined in the methods section
    attached: function () { },
    moved: function () { },
    detached: function () { },
  },

  // Life periodic function, which can be either a function or a method name defined in the methods section
  attached: function () { }, // The declaration attached here is overridden by the declaration in the lifetimes field
  ready: function() { },

  pageLifetimes: {
    // Life-periodic function of the page where the component resides
    show: function () { },
    hide: function () { },
    resize: function () { },
  },

  methods: {
    onMyButtonTap: function(){
      this.setData({
        // Updating properties and data is similar to updating page data
      })
    },
    // Internal method recommendations start with an underscore
    _myPrivateMethod: function(){
      // Here will be data.A[0].B Set to 'myPrivateData' 
      this.setData({
        'A[0].B': 'myPrivateData' 
      })
    },
    _PropertyChange:  function(newVal, oldVal) {

    }
  }

})

# use Component The constructor constructs the page

In fact, the pages of an Mini Program can also be considered a custom component. The page can also be used. Component A constructor construct that has the same definition segments and instance methods as a normal component. But at this point, it requires correspondence json The file contains usingComponents Definition paragraph.

At this point, the component's properties can be used to receive parameters for the page, such as visiting the page /pages/index/index?paramA=123&paramB=xyz , if the declaration has properties ParamA or paramB , then they will be assigned a value of 123 or xyz 。

A lifecycle approach to the page (i.e. on Method at the beginning), should be written in the methods In the definition paragraph.

Code example:

{
  "usingComponents": {}
}

Component({

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

  methods: {
    onLoad: function() {
      this.data.paramA // Page Parameters ParamA The value of
      this.data.paramB // Page Parameters paramB The value of
    }
  }

})

use Component Constructor to construct a page is that you can use the behaviors To extract the code snippets that are common across all pages.

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

Code example:

// page-common-behavior.js
module.exports = Behavior({
  attached: function() {
    // Executed when the page is created
    console.info('Page loaded!')
  },
  detached: function() {
    // When the page is destroyed
    console.info('Page unloaded!')
  }
})

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

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