Constructor

2021-07-06 11:36

Constructor

Parameter Description

Parameter	Type	Required	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

Property	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.