Template and Style

Similar to page, custom component has its own axml template and acss style.

axml

The axml is the mandate part of custom component.
Note:
Different from page, user’s customized event shall be placed in methods.
Example:

<!-- /components/xx/index.axml -->
<view onTap="onMyClick" id="c-{{$id}}"/>

Component({
  methods: {
    onMyClick(e) {
      console.log(this.is, this.$id);
    },
  },
});

slot

By supporting props in component js, the custom component can interact with external caller, accepting the data transferred from the external caller, calling the function transferred from the external caller, and notifying the internal change of the component to the external caller.
However, this is not enough, because the custom component is not flexible enough. In addition to data processing and notification, the Mini Program provides slot, so that the custom component axml structure can be assembled by using the axml transferred from the external caller. The external caller can transfer axml to custom component, which the custom component uses to assemble the final component axml structure.

Default slot

Sample code:

<!-- /components/xx/index.axml -->
<view>
  <slot>
    <view>default slot & default value</view>
  </slot>
  <view>other</view>
</view>

Caller does not transfer axml

<!-- /pages/index/index.axml -->
<xx />

Page output:

default slot & default value
other

Caller transfers axml

<!-- /pages/index/index.axml -->
<xx>
  <view>xx</view>
  <view>yy</view>
</xx>

Page output:

xx
yy
other

The “slot” can be interpreted as the slot. The “default slot” is the default slot. If the caller does not transfer axml in the component tag , the default slot is rendered. If the caller transfers axml in the component tag , it is used to replace the default slot and assemble the final axml for render.

Named slot

The default slot can transfer one set of axml. For complicated component, it is required to render different axml at different locations, that is, to transfer multiple axml. Here it needs named slot .
Sample code:

<!-- /components/xx/index.axml -->
<view>
  <slot>
    <view>default slot & default value</view>
  </slot>
  <slot name="header"/>
  <view>body</view>
  <slot name="footer"/>
</view>

Transfer only named slot

<!-- /pages/index/index.axml -->
<xx>
  <view slot="header">header</view>
  <view slot="footer">footer</view>
</xx>

Page output

default slot & default value
header
body
footer

Transfer named slot and default slot

<!-- /pages/index/index.axml -->
<xx>
  <view>this is to default slot</view>
  <view slot="header">header</view>
  <view slot="footer">footer</view>
</xx>

Page output

this is to default slot
header
body
footer

The named slot is the slot with a name. In the sub-tag of the custom component tag, the external caller can specify which part of axml to place in which named slot of the custom component. The part without named slot specified in the sub-tag of the custom component tag is placed into the default slot. If it transfers only the named slot, the default slot will not be overwritten.

slot-scope

Through the named slot, the custom component axml uses either the custom component axml, or the external caller (such as page) axml.
By using the custom component axml, it is possible to access the data within the component. Through the props attribute, meanwhile, it is possible to access the data of external caller.
Example:

// /components/xx/index.js
Component({
  data: {
    x: 1,
  },
  props: {
    y: '',
  },
});

<!-- /components/xx/index.axml -->
<view>component data: {{x}}</view>
<view>page data: {{y}}</view>

// /pages/index/index.js
Page({
  data: { y: 2 },
});

<!-- /pages/index/index.axml -->
<xx y="{{y}}" />

Page output:

component data: 1
page data: 2

When the custom component uses external caller (such as page) axml through slot, it can access the data of external caller only.
Sample code:

<!-- /components/xx/index.axml -->
<view>
  <slot>
    <view>default slot & default value</view>
  </slot>
  <view>body</view>
</view>

// /pages/index/index.js
Page({
  data: { y: 2 },
});

<!-- /pages/index/index.axml -->
<xx>
  <view>page data: {{y}}</view>
</xx>

Page output:

page data: 2

The slot scope allows the slot content can access the data within the component.
Sample code:

// /components/xx/index.js
Component({
  data: {
    x: 1,
  },
});

<!-- /components/xx/index.axml -->
<view>
  <slot x="{{x}}">
    <view>default slot & default value</view>
  </slot>
  <view>body</view>
</view>

// /pages/index/index.js
Page({
  data: { y: 2 },
});

<!-- /pages/index/index.axml -->
<xx>
  <view slot-scope="props">
    <view>component data: {{props.x}}</view>
    <view>page data: {{y}}</view>
  </view>
</xx>

Page output:

component data: 1
page data: 2
body

As shown above, the custom component exposes the internal component data by defining the slot attribute. When the page uses the component, the action scope slot is declared via slot-scope. The attribute value defines the temporary variable name props, thus accessible to the internal data of the component.

acss

Just like the page, the custom component can have its defined own acss style. The acss is automatically introduced into the page that uses the component without manual introduction of the page.