组件内slot插槽传值

关于vue插槽slot来回传值问题

有些情况下，我们需要将组件内的值传给slot插槽，供使用组件的地方调用，这时候可以给slot一个name属性，在使用组件的地方#name名称接收。

<swiper class="swiper" :options="swiperOption" id="cateCard">
  <swiper-slide v-for="(category, index) in categories" :key="index">
    <slot name="items" :category="category.newsList"></slot>
  </swiper-slide>
  <div class="swiper-pagination" slot="pagination"></div>
</swiper>

1. 给slot添加有个name属性，并传值
2. 在引用组件处使用 #items="{ category }"接收

<m-list-card icon="caidan" title="新闻资讯" :categories="newsCates">
  <template #items="{ category }">
    <div
      class="swiper-centent mt-3 d-flex"
      v-for="(item, index) in category"
      :key="index"
    >
      <sapn>[{{ item.categories }}]</sapn>
      <sapn class="mx-2">|</sapn>
      <sapn class="flex-grow-1">{{ item.title }}</sapn>
      <sapn>{{ item.date }}</sapn>
    </div>
  </template>
</m-list-card>