Name	Type	Mandatory	Description
properties	object map	No	External properties of a component. For details, see properties.
data	object	No	Internal data of a component, which is used with properties for the rendering of the component template.
observers	object	No	Observers used to listen for the changes of properties and data.
methods	object	No	Custom methods of a component, which are used to respond to events.
behaviors	string array	No	Code reuse mechanism between components.
created	function	No	Component lifecycle function, which is executed when a component instance is created.
attached	function	No	Component lifecycle function, which is executed when a component instance enters the page node tree.
ready	function	No	Component lifecycle function, which is executed after the component layout is complete.
moved	function	No	Component lifecycle function, which is executed when a component instance is moved to another node in the node tree.
detached	function	No	Component lifecycle function, which is executed when a component instance is removed from a page.
relations	object	No	Relationships between components.
externalClasses	string array	No	External style classes accepted by the component.
lifetimes	object	No	Declaration object of the component lifecycle.
pageLifetimes	object	No	Declaration object of the lifecycle of the page where the component is located.
definitionFilter	function	No	Definition filter, which is used for custom component extension.

Component Instance Properties

You can use this to access the component instance in custom component methods, lifecycle functions, and observers.

Name	Type	Description
is	string	File path of a component.
id	string	Node ID.
dataset	string	Dataset of a node.
data	object	Component data, including internal data and property values.
properties	object	Component data, including internal data and property values (this.data === this.properties).

Component Instance Methods

Name	Parameter	Description
setData	object	Sets data and triggers the update of the rendering layer.
hasBehavior	object	Checks whether a component has a behavior. (All behaviors that are directly or indirectly introduced are checked recursively.)
triggerEvent	string, object	Triggers an event.
createSelectorQuery	-	Creates a SelectorQuery object. The selection range of the selector is within the component instance.
createIntersectionObserver	-	Creates an IntersectionObserver object. The selection range of the selector is within the component instance.
selectComponent	string	Selects a component instance node and returns the first matched component instance object. The return result is subject to has://component-export.
selectAllComponents	string	Selects a component instance node and returns an array consisting of all matched component instance objects.
selectOwnerComponent	-	Selects the component instance (referencer) where the component node exists and returns its component instance object, which is subject to has://component-export.
getRelationNodes	string	Obtains all associated nodes corresponding to the relationship.
groupSetData	function	Executes the callback immediately.
getTabBar	-	Returns the custom-tab-bar component instance of the current page.
getPageId	-	Returns a page ID (a string), which is used to determine whether several custom component instances are on the same page.

The sample code snippet is as follows:

Component({
  behaviors: [],
  properties: {
    propName: {
      // Property name.
      type: String,
      value: ''
    },
    propName2: String // Simplified definition mode.
  },
  data: {}, // Data in the component, which can be used for template rendering.
  lifetimes: {
    // Lifecycle functions.
    attached: function () { },
    detached: function () { },
    ready: function () { }
  },
  pageLifetimes: {
    // Lifecycle functions of the page.
    show: function () { },
    hide: function () { },
    resize: function () { }
  },
  methods: {
    handleTap: function () {
      this.setData({
        // The method of updating properties and data is the same as that of updating page data.
      })
    }
  }
})

properties

In the properties section, the property name is in camel case (for example, propertyName). In the HXML file, the tag property name is hyphenated (for example, component-tag-name property-name="attr value"), and in camel case (attr="") for data binding.
The page update cannot be triggered by changing the value of this.data. Use setData to change the value.
The field names in the properties and data sections of Component must be different. Otherwise, the field with the same name in the data section will be overridden when the properties section is modified.

Name	Type	Mandatory	Description
type	-	Yes	Property type. The value is String, Number, Boolean, Object or Array. If this parameter is not set, the type is not limited.
optionalTypes	array	No	Property type. You can specify multiple types.
value	-	No	Initial value of a property.
observer	function	No	Callback used to listen for property value changes. The first parameter of the return value is the new value, and the second parameter is the old value.

Example

Component({
  properties: {
    min: {
      type: Number,
      value: 0,
      observer: function (newValue, oldValue) {
        // Executed when the property value changes.
      }
    },
  },
})

Page Constructing Using Component

ASCF pages can also be regarded as custom components. Therefore, you can also use the Component constructor to construct a page, which has the same definition sections and instance methods as a common component.

In this case, the properties of the component can be used to receive parameters of the page. For example, when /pages/detail/detail?paramA=abc&paramB=999 is accessed and the paramA and paramB properties are declared, the property values are set to abc and 999.

Page lifecycle methods (methods starting with on) must be written in the methods section.