All Products
Search
Document Center

Component template and style

Last Updated: Apr 08, 2021

Similar to pages, custom components can have their own AXML templates and ACSS styles.

AXML

AXML is a mandatory part of a custom component.

  1. <!-- /components/index/index.axml -->
  2. <view onTap="onMyClick" id="c-{{$id}}"/>
  1. // /components/index/index.js
  2. Component({
  3. methods: {
  4. onMyClick(e) {
  5. console.log(this.is, this.$id);
  6. },
  7. },
  8. });
Note: Unlike pages, custom events need to be placed in methods.

Slot

If the component js supports props, a custom component can interact with external callers and receives data from external callers. It can also call functions from external callers and notifies external callers of changes in the component.

However, custom components are not flexible enough. In addition to data processing and notification, the slot provided by the Mini Program can be used to assemble the axml structure of a custom component and the axml passed from an external caller. An external caller passes axml to the custom component, and the custom component uses it to assemble the final component axml structure.

Default slot

Sample code:

  1. <!-- /components/index/index.axml -->
  2. <view>
  3. <slot>
  4. <view>default slot & default value</view>
  5. </slot>
  6. <view>other</view>
  7. </view>

Caller does not pass AXML:

  1. // /pages/index/index.json
  2. {
  3. "usingComponents": {
  4. "my-component": "/components/index/index"
  5. }
  6. }
  1. <!-- /pages/index/index.axml -->
  2. <my-component />

Output:

  1. default slot & default value
  2. other

Caller passes axml:

  1. <!-- /pages/index/index.axml -->
  2. <my-component>
  3. <view>header</view>
  4. <view>footer</view>
  5. </my-component>

Output:

  1. header
  2. footer
  3. other

If the caller does not pass axml between the component tags <xx>, the default slot is rendered. If the caller passes axml between the component tags <xx>, axml is used instead of the default slot to assemble the final amxl for render.

Named slot

The default slot can only pass one copy of axml. A complex component needs to render different axmls in different positions, that is, multiple axmls need to be passed. Therefore, the named slot is required. If the named slot is used, the external caller can specify a part of axml in the subtag of the custom component tag and put it into a specific named slot of the custom component. The other part in the sub-tab of the custom component tag that does not have a specified named slot will be placed in the default slot. If the named slot is passed only, the default slot will not be overwritten.

Sample code:

  1. <!-- /components/index/index.axml -->
  2. <view>
  3. <slot>
  4. <view>default slot & default value</view>
  5. </slot>
  6. <slot name="header"/>
  7. <view>body</view>
  8. <slot name="footer"/>
  9. </view>

Passes the named slot only:

  1. <!-- /pages/index/index.axml -->
  2. <my-component>
  3. <view slot="header">header</view>
  4. <view slot="footer">footer</view>
  5. </my-component>

Output:

  1. default slot & default value
  2. header
  3. body
  4. footer

Passes the named slot and the default slot:

  1. <!-- /pages/index/index.axml -->
  2. <my-component>
  3. <view>this is to default slot</view>
  4. <view slot="header">header</view>
  5. <view slot="footer">footer</view>
  6. </my-component>

Output:

  1. this is to default slot
  2. header
  3. body
  4. footer

slot-scope

When the named slot is used, the custom component either uses its own axml or axml of an external caller (such as a page).If axml of the custom component is used, the internal component data can be accessed. With the help of props, the data of the external caller can also be accessed.

Sample code:

  1. // /components/index/index.js
  2. Component({
  3. data: {
  4. x: 1,
  5. },
  6. props: {
  7. y: '',
  8. },
  9. });
  1. <!-- /components/index/index.axml -->
  2. <view>component data: {{x}}</view>
  3. <view>page data: {{y}}</view>
  1. // /pages/index/index.js
  2. Page({
  3. data: { y: 2 },
  4. });
  1. <!-- /pages/index/index.axml -->
  2. <my-component y="{{y}}" />

Output on the page:

  1. component data: 1
  2. page data: 2

If the custom component uses axml of an external caller (such as a page), only the external caller can be accessed.

Sample code:

  1. <!-- /components/index/index.axml -->
  2. <view>
  3. <slot>
  4. <view>default slot & default value</view>
  5. </slot>
  6. <view>body</view>
  7. </view>
  1. // /pages/index/index.js
  2. Page({
  3. data: { y: 2 },
  4. });
  1. <!-- /pages/index/index.axml -->
  2. <my-component>
  3. <view>page data: {{y}}</view>
  4. </my-component>

Output:

  1. page data: 2
  2. body

The slot scope allows the content of the slot to access the internal component data.

Sample code:

  1. // /components/index/index.js
  2. Component({
  3. data: {
  4. x: 1,
  5. },
  6. });
  1. <!-- /components/index/index.axml -->
  2. <view>
  3. <slot x="{{x}}">
  4. <view>default slot & default value</view>
  5. </slot>
  6. <view>body</view>
  7. </view>
  1. // /pages/index/index.js
  2. Page({
  3. data: { y: 2 },
  4. });
  1. <!-- /pages/index/index.axml -->
  2. <my-component>
  3. <view slot-scope="props">
  4. <view>component data: {{props.x}}</view>
  5. <view>page data: {{y}}</view>
  6. </view>
  7. </my-component>

Output:

  1. component data: 1
  2. page data: 2
  3. body

As shown above, the custom component defines the slot property to expose the internal component data. When the page uses the component, the scope slot is used, and the property value is defined using the temporary variable name props. In this way, the internal data of the component can be accessed.

acss

Like pages, custom components can define their own acss styles. acss will be automatically introduced into the page that uses the component. For details, see acss syntax.