526互联

vue-slot 插槽使用 遍历插槽

发布时间 2023-12-22 10:36:09作者: 凿壁偷光，集思广益
   <!-- 内部直接使用的插槽 -->
    <template #chart>
      <KeepAlive>
        <component
          v-bind="$attrs"
          :exName="exName"
          :tableData="tableData"
          :analysisDetail="analysisDetail?.[actComp.key]"
          :is="actComp.secondComp"
        />
      </KeepAlive>
    </template>
    <!-- 外层插入插槽 -->
    <template v-for="(_, slotKey, slotIndex) in $slots" :key="slotIndex" #[slotKey]="slotData">
      {{ slotKey }}
      <KeepAlive v-if="slotKey === 'chart'">
        <component
          v-bind="$attrs"
          :exName="exName"
          :tableData="tableData"
          :analysisDetail="analysisDetail?.[actComp.key]"
          :is="actComp.secondComp"
        />
      </KeepAlive>

      <slot :name="slotKey" v-bind="slotData"></slot>
    </template>

写入插槽

  <div v-if="bItem.slot">
        <slot :name="bItem.slot" v-bind="{ data: bItem }"></slot>
</div>

插入插槽 使用 eventBtnData 中写入时的 data
<template #reviewsExcel="eventBtnData">
          <ReviewsDownload :data="{ asinId, ...eventBtnData.data }" />
</template>