Method and Attribute

Component Methods

The custom component can not only render static data but also respond to user click event, so as to handle and trigger custom component re-render. In the methods, it is possible to define any customized method.
Note:
Different from Page, the custom component needs to define the event handler in the methods.
Modify component axml:

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

Handle event in component js:

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

Now the page renders an additional button. Each click on it will increase the page number by 1.

Props

Custom component is not isolated from the outside. By now, the example is a standalone module. To make it interact with the outside, the custom component can accept external input. After processing is done, it can notify the outside with “Done”. All those can be implemented with props.
Example:
Note:

• The props is the attribute transferred from outside. It is possible to specify default attribute, and cannot modify in the internal codes of the custom component.

• In the custom component axml, it is possible to refer to the props attribute directly.

• For the event in the custom component axml, only the method in the “methods” of the js of the custom component can respond. If it is required to call the function transferred from the parent component, it is possible to call it via this.props in the methods.

// /components/counter/index.js
Component({
  data: { counter: 0 },
  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); // Response to the event in axml can be through the method in "methods" only
    },
  },
});

The above codes set default attributes for props, and then the event handler get those attributes via this.props.

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

External use: do not transfer props

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

Page output:

0
extra: default extra
+1

Now no parameter is transferred, so the page shows the default configured for props in the component js.
External use: transfer props
Note:
When custom component is used externally, if the transfer parameter is a function, the “on” suffix is necessary; 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" />

Page output:

0
extra: external extra
+1

Here parameter is transferred, so the page shows the extra value transferred externally “external extra”.