# Component(Object object)

Create a custom component that accepts a Object Parameter of type.

# parameter

# Object object

Generated component instances can be found in component methods, lifecycle functions, and properties observer Through this Access. Components contain common properties and methods.

Code example:

Preview with Developer Tool

Component({

  behaviors: [],

  // Property definition (see below for details)
  properties: {
    myProperty: { // Attribute name 
      type: String,
      value: ''
    },
    myProperty2: String // Simplified definition
  },

  data:  {}, // Private data, available for template rendering

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

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

  pageLifetimes: {
    // Life Cycle Function for the Page on which the component is located
    show: function () { },
    hide: function () { },
    resize: function () { },
  },

  methods: {
    onMyButtonTap: function(){
      this.setData({
        // The method of updating properties and data is similar to that of updating page data
      })
    },
    // The internal method recommends starting 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) {

    }
  }

})

Note: in properties In the definition section, the property name is written as a humppropertyName）in wxml Property values are specified using the hyphen notationcomponent-tag-name property-name="attr value"Is applied to data binding in a hump notationattr=""）。

# properties definition

Property values can be changed using the observer To monitor. Currently, this field is not recommended in the new version of the base library; instead, use the Component Constructor observers Field, which is more powerful and better performance.

Code example:

Component({
  properties: {
    min: {
      type: Number,
      value: 0
    },
    min: {
      type: Number,
      value: 0,
      observer: function(newVal, oldVal) {
        // When property values change
      }
    },
    lastLeaf: {
      // This property can be Number 、 String 、 Boolean One of three types.
      type: Number,
      optionalTypes: [String, Object],
      value: 0
    }
  }
})

Property can be of type String Number Boolean Object Array One, can also be null Represents an unrestricted type.

In most cases, it is best to specify an exact type for a property. So, in... WXML When an attribute value is specified literarily in, the value can obtain an exact type, such as

<custom-comp min="1" max="5" />

At this point, because the corresponding property of the custom component is specified as Number Type, min and Max Is going to be assigned to 1 and 5 Instead of "1" and "5" , namely:

this.data.min === 1 // true
this.data.Max === 5 // true

# Bug & Tips:

• Use this.data Can get internal data and attribute valuesBut modifying it directly does not apply changes to the interface, and you should use the setData Modify.
• Lifecycle functions cannot be passed through component methods this Access to.
• Property names should be avoided with data Beginning, that is, do not name dataXyz This form, because in WXML In, data-xyz="" Will be used as nodes dataset Instead of component properties.
• In the definition and use of a component, the component's attribute name and data Fields cannot conflict with each other (although they are in different definition segments).
• From base library 2.0.9 To start, the properties of the object type and data A field can contain subfields of a function type, that is, a function can be passed through a property field of an object type. Base libraries below this release do not support this feature.
• bug : Be located slot The custom component in the pageLifetimes The page lifecycle declared in the 2.5.2 Fix in.
• bug : for type for Object or Array Property of the component, if passed by the component's own this.setData To change a subfield of the property value, the property will still be triggered observer And, observer Received newVal Is the value of the changed subfield, oldVal Is empty, changedPath Field name information containing child fieldsCurrently recommended observers Define paragraph instead.