# Component(Object object)

Creates a custom component that takes an argument of typeObject.

# parameter

# Object object

The generated component instance can be accessed throughthisin [] serverof the component's methods, life-periodic functions, and properties.The components contain some common properties and methods.

# ApplyAnimatedStyle parameter definition

# Definition of configuration items

Selectoris synonymous with SelectorQuery.select .

By default, theupdaterfunction will be executed once, and the result will be applied to the node as an initial value, setting theimmediate: falseskips the first execution.

The set of styles supported by theStyleObjectreturned by the updaterfunction refers to the skyline wxss style .StyleObjectThe key is the hump of the css attribute.

When the dependentsharedValuevalue is updated, theupdaterfunction is re-executed and the newstyleis applied to the selected node.By default, the new style takes effect on the next render slice (better performance), setting theflush: syncThis makes it effective on the current rendering time frame.

CallbackCallback returnsstyleIdthat can be used to clear style bindings.

const offset = shared(0)
const styleIds = []
this.applyAnimatedStyle('.box', () => {
  'worklet'
  return {
    transform: `translateX(${offset.value}px) rotate(30deg)`
  }
}, {
  immediate: true,
  flush: 'async'
}, (res) => {
  console.log('animatedStyle 已绑定到节点 ', res.styleId)
  styleIds.push(res.styleId)
})

this.clearAnimatedStyle('.box', styleIds, () => {
  console.log('animatedStyle 已清除绑定')
})

# ClearAnimatedStyle Parameter Definition

The styleIdsarray is empty, then all boundanimatedStyleon the selected node is cleared,Note that the style does not reset, but simply removes the dependencies.styleIdcan be obtained fromapplyAnimatedStylecallback parameter.

When the node is removed, the relevantanimatedStyleis automatically released, andclearAnimatedStylecan be used when you need to unbind earlier.

# sample code

Preview with Developer Tool

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) {

    }
  }

})

Note: In thepropertiesdefinition paragraph, property names are humped (propertyName);Inwxml, a hyphen is used to specify attribute values (component-tag-name property-name = "attr value"), which is used in data binding with a hump (attr=""）。

# PropertiesDefinition

Changes in property values can be monitored using observers.Currently, it is not recommended to use this field in the new version of the repository, but rather to use the Component builder'sobserversfield, which is more powerful and performs better.

__Note: In the__definition paragraph, thetypeThefield is a required__entry, although {% version ('2.17.2') %} the base library above has increased compatibility with unfilled fields (compatibility with filled fields when unfilled).null), but lower versions of the base library can't handle unfilled cases, and at worst may render the page incorrectly. Please note compatibility.

# sample code

Component({
  properties: {
    min: {
      type: Number,
      value: 0
    },
    max: {
      type: Number,
      value: 0,
      observer: function(newVal, oldVal) {
        // 属性值变化时执行
      }
    },
    lastLeaf: {
      // 这个属性可以是 Number 、 String 、 Boolean 三种类型中的一种
      type: Number,
      optionalTypes: [String, Object],
      value: 0
    }
  }
})

Attribute can be of typeString``Number``Boolean``Object``ArrayFirst, you can also usenullto denote the unrestricted type.

In most cases, it's best to specify an exact type for an attribute. This way, when the attribute value is specified as a literal in WXML, the value gets an exact type, such as:

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

At this point, since the corresponding attribute of the custom component is specified asNumberType,minandmaxwill be assigned the values1and]]5, rather than"1"and"5", namely:

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

# Bug & Tip

• Internal data and attribute values can be obtained usingthis.data;However, modifying it directly will not apply the changes to the interface and should be modified usingsetData.
• Life-periodic functions cannot be accessed in a component method throughthis.
• Attribute names should avoid starting with data, that is, do not namedataXyzIn this form, because in WXML,data-xyz = ""is treated as a node dataset, not as a component property.
• When a component is defined and used, the component's property names and data fields cannot conflict with each other (although they are in different definitions).
• Starting with the base library {% version ('2.0.9')}, the object-type properties and data fields can contain subfields of the function type, that is, functions can be passed through the object-types properties fields.Libraries below this version do not support this feature.
• Bug: The custom component located in slot did not trigger the page lifecycle declared inpageLifetimes. This problem was fixed in {% version ('2.5.2')}.
• Bug: For attributes of type Object or Array,If a subfield of the attribute value is changed through the component's own this.setData, the attribute observer is still triggered, and the observer receives thenewValis the value of the child field that is changed,oldValis empty,changedPathcontains information about the field name of the child fields;It is currently recommended to use theobserversdefinition paragraph instead.