Constructor

Constructor

Parameter Description

ParameterTypeMandate or notDescription
dataObjectNoComponent internal status
propsObjectNoset default for incoming data
onInitFunctionNocomponent lifecycle function, trigger on component creation
deriveDataFromPropsFunctionNocomponent lifecycle function, trigger on component creation and update
didMountFunctionNocomponent lifecycle function, trigger on component creation completion
didUpdateFunctionNocomponent lifecycle function, trigger on component update completion
didUnmountFunctionNocomponent lifecycle function, trigger on component deletion
mixinsArrayNocode reuse mechanism between components
methodsObjectNocomponent method, can be event response function or any customized method

Sample Code

js sample code:

copy
Component({
  mixins:[{ didMount() {}, }],
  data: {y:2},
  props:{x:1},
  didUpdate(prevProps,prevData){},
  didUnmount(){},
  methods:{
    onMyClick(ev){
      my.alert({});
      this.props.onXX({ ...ev, e2:1});
    },
  },
})

Component Instance Attribute List

Parameter Description

Attribute nameTypeDescription
dataObjectComponent internal data
propsObjectincoming component attribute
isStringcomponent path
$pageObjectcomponent page instance
$idNumbercomponent id, can render value in component axml

Sample Code

js sample code:

copy
// /components/xx/index.js
Component({
  didMount(){
    this.$page.xxCom = this; // this operation can load the component instance to the belonging page instance
    console.log(this.is);
    console.log(this.$page);
    console.log(this.$id);
  }
});

axml sample code:

copy
<!-- /components/xx/index.axml component id can directly render value in component axml -->
<view>{{$id}}</view>

json sample code:

copy
// /pages/index/index.json
{
  "usingComponents": {
    "xx": "/components/xx/index"
  }
}

js sample code:

copy
Page({
  onReady() {
    console.log(this.xxCom); // can access all loaded components loaded onto the current page
  },
})

When the component is rendered on the page, execute the didMount callback, and the console has the following output:

copy
/components/xx/index
{$viewId: 51, route: "pages/index/index"}
1

Component Instance Method List

Method nameParameterDescrsiption
setDataObjectSetting data triggers view rendering
$spliceDataObjectSetting data triggers view rendering