# dynamic slot

Due to the current glass-easel The component framework is available only for Skyline Rendering engineThese features are also limited.

# static state slot And Dynamic slot

Simple custom components slot There are two types: single slot And many slot , depending on the custom component's multipleSlots Options. They are all static. slot 。

They all require the same Name Of) slot There is only one node, the repeated <slot /> Only the first one will take effect.

It is called "static" because regardless of the implementation of the component, slot Content (provided by the component user) appears only once and is not affected by <slot /> Repeat and repeat. This makes it easier for the component's user to control its own nodes.

In terms of performance, a single slot It also has a relatively optimal performance.

But sometimes you need to use it in the list slot bring slot The content is repeated many times. At this point you can use dynamic slot 。

Component({
  options: {
    dynamicSlots: true, // Enabling dynamic slot
  },
  data: {
    list: ['A', 'B', 'C'],
  },
})

Then, in the template, you can make <slot /> Repeat many times:

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

# Through dynamic slot Transfer data

In Dynamic slot In, repeated. <slot /> Can carry different data separately. For example:

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

The above slot Carried in the list-index and item Two data items.

The user of the component can be accessed through the slot: To receive slot Any data items passed. For example:

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

The user of the component receives the slot You can change the field name of the data item when you pass it. For example:

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