Mobile Platform as a Service:Component object

Component constructor

Description

Code sample:

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

Note: onInit and deriveDataFromProps apply to basic library 1.14.0 and later versions. You can use my.canIUse('component2') to implement compatibility.

methods

A custom component can not only render static data, but also respond to user click events, which processes and triggers the custom component to re-render. Any custom method can be defined in methods.

Note: Unlike pages, custom components need to define the event handling function in methods.

// /components/counter/index.axml
<view>{{counter}}</view>
<button onTap="plusOne">+1</button>

// /components/counter/index.js
Component({
  data: { counter: 0 },
  methods: {
    plusOne(e) {
      console.log(e);
      this.setData({ counter: this.data.counter + 1 });
    },
  },
});

A page renders a button. The number of the page increases by 1 each time you tap the button.

props

The custom component can accept input from the external. After the component processes the input, it notifies the external that the work is done. These can be implemented using props.

Notes:

// /components/counter/index.js
Component({
  data: { counter: 0 },
  // Sets default properties
  props: {
    onCounterPlusOne: (data) => console.log(data),
    extra: 'default extra',
  },
  methods: {
    plusOne(e) {
      console.log(e);
      const counter = this.data.counter + 1;
      this.setData({ counter });
      this.props.onCounterPlusOne(counter); // Events in axml can be responded to only by the method in methods.
    },
  },
});

In the above code, props is used to set default properties, which can be obtained using this.props in the event handler.

// /components/counter/index.axml
<view>{{counter}}</view>
<view>extra: {{extra}}</view>
<button onTap="plusOne">+1</button>

// /pages/index/index.json
{
   "usingComponents": {
     "my-component": "/components/counter/index"
   }
}

External does not pass props

// /pages/index/index.axml
<my-component />

Output on the page:

0
extra: default extra
+1

No parameters are passed. Therefore, the page displays the default value set by props in js of the component.

External passes props

Note: When the external uses a custom component, if the passed parameter is a function, the parameter must be prefixed with on. Otherwise, it will be processed as a string.

// /pages/index/index.js
Page({
  onCounterPlusOne(data) {
    console.log(data);
  },
});

// /pages/index/index.axml
<my-component extra="external extra" onCounterPlusOne="onCounterPlusOne" />

Output on the page:

0
extra: external extra
+1

A parameter is passed. Therefore, the page displays the extra value passed externally, which is external extra.

Component instance properties

Code sample:

// /components/index/index.js
Component({
  didMount(){
    this.$page.xxCom = this; // This operation mounts the component instance on the page instance to which the component belongs.
    console.log(this.is);
    console.log(this.$page);
    console.log(this.$id);
  }
});

<! -- /components/index/index.axml The component ID can be rendered in axml of the component.
<view>{{$id}}</view>

// /pages/index/index.json
{
  "usingComponents": {
    "my-component": "/components/index/index"
  }
}

// /pages/index/index.js
Page({
  onReady() {
    console.log(this.xxCom); // You can access the components mounted on the current page.
  },
})

After the component is rendered on the page, the didMount callback is executed. The console output is as follows:

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

Component instance method

The usage is same as that in Page.