Constructor

2022-07-25 11:19

Constructor

Parameter Description

Parameter	Type	Mandate or not	Description
data	Object	No	Component internal status
props	Object	No	set default for incoming data
onInit	Function	No	component lifecycle function, trigger on component creation
deriveDataFromProps	Function	No	component lifecycle function, trigger on component creation and update
didMount	Function	No	component lifecycle function, trigger on component creation completion
didUpdate	Function	No	component lifecycle function, trigger on component update completion
didUnmount	Function	No	component lifecycle function, trigger on component deletion
mixins	Array	No	code reuse mechanism between components
methods	Object	No	component 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 name	Type	Description
data	Object	Component internal data
props	Object	incoming component attribute
is	String	component path
$page	Object	component page instance
$id	Number	component 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 name	Parameter	Descrsiption
setData	Object	Setting data triggers view rendering
$spliceData	Object	Setting data triggers view rendering