# Dynamic slot

Since the glass-easel component framework is currently only available for the Skyline rendering engine , these features are also limited by this.

# Static slot and dynamic slot

There are two simple custom component slot types: single slot and multiple slots, depending on the custom component'smultipleSlotsoption.They are all static slots.

They all require that there is only one slot node (with the same name), and only the first of the repeated "" will take effect.

It is called "static" because regardless of the implementation of the component, the contents of the slot (provided by the user of the component) will appear only once, and will not be repeated by repeated. This makes it easier for a component's user to control its own nodes.

From the performance point of view, a single slot also has a relatively optimal performance.

But sometimes you need to use slots in the list so that the contents of the slot are repeated multiple times. Dynamic slots can be used at this time.

Component({
  options: {
    dynamicSlots: true, // 启用动态 slot
  },
  data: {
    list: ['A', 'B', 'C'],
  },
})

Then, in the template, you can make'repeat multiple times:

<block wx:for="{{ list }}">
  <slot />
</block>

# Passing data through dynamic slots

In a dynamic slot, the repeated "" can carry different data separately. For example:

<block wx:for="{{ list }}">
  <slot list-index="{{ index }}" item="{{ item }}" />
</block>

The slot above carries two data items:list-indexanditem.

The user of the component can receive any data item passed by the slot through theslot:.For example:

<view>
  <child>
    <view slot:item>{{ item }}</view>
    <view slot:listIndex>{{ listIndex }}</view>
  </child>
</view>

The user of the component can change the field name of the data item when it receives the data item passed by the slot. For example:

<view>
  <child>
    <view slot:listIndex="index">{{ index }}</view>
  </child>
</view>