vue 中slot插槽的使用

父传子 简单传值

//在父组件
    <m-card icon="Menu" title="新闻资讯">
       <div class="py-2" v-for="n in 5" :key="n">
          <span>[新闻]</span>
          <span>|</span>
          <span>夏日新版本"稷下醒之队"即将6月上线</span>
          <span>06/01</span>
        </div>
    </m-card>

//子组件中
<template>
  <div>
    <div class="card bg-white p-3 mt-3">
      <div class="card-header d-flex ai-center pb-3">
        <i class="iconfont" :class="`icon-${icon}`"></i>
        <div class="fs-xl flex-1 px-2">{{ title }}</div>
        <i class="iconfont icon-menu-p"></i>
      </div>
      <div class="card-body pt-3">
        <slot></slot>
      </div>
    </div>
  </div>
</template>
 export default {
  props: {
    title: { type: String, required: true },
    icon: { type: String, required: true },
  },
};

父传子 子在传父

//父组件
  <m-list-card icon="Menu" title="新闻资讯" :categories="newsCats">
      <template #items="{ category }">  //接收到子组件的值
        <div class="py-2" v-for="(item,index) in category.newsList" :key="index">
          <span>[{{item.categoryName}}]</span>
          <span>|</span>
          <span>{{item.title}}</span>
          <span>{{item.date}}</span>
        </div>
      </template>
    </m-list-card>
export default {
  data() {
    return {
    newsCats: [
        {
          name: "热门",
          newsList: new Array(5).fill({}).map(() => ({
            categoryName: "热门",
            title: '夏日新版本"稷下醒之队"即将6月上线',
            date: "06/01",
          })),
        },
        {
          name: "新闻",
          newsList: new Array(5).fill({}).map(() => ({
            categoryName: "新闻",
            title: '即将6月上线，夏日新版本"稷下醒之队',
            date: "06/02",
          })),
        },
        {
          name: "公告",
          newsList: new Array(5).fill({}).map(() => ({
            categoryName: "公告",
            title: '即将6月上线，夏日新版本"稷下醒之队',
            date: "06/02",
          })),
        },
        {
          name: "活动",
          newsList: new Array(5).fill({}).map(() => ({
            categoryName: "活动",
            title: '即将6月上线，夏日新版本"稷下醒之队',
            date: "06/02",
          })),
        },
        {
          name: "赛事",
          newsList: new Array(5).fill({}).map(() => ({
            categoryName: "赛事",
            title: '即将6月上线，夏日新版本"稷下醒之队',
            date: "06/02",
          })),
        },
      ],
      
	}
}
}


//在子组件中
```javascript
<template>
  <div>
    <m-card :icon="icon" :title="title">
      <div class="nav jc-between">
        <div class="nav-item" :class="{active:active === index}" v-for="(item,index) in categories" :key="index" @click="active = index">
          <div class="nav-link">{{item.name}}</div>
        </div>
      </div>

      <div class="mt-2">
        <swiper>
          <swiper-slide v-for="(category,index) in categories" :key="index">
            <slot name="items" :category="category"></slot> //category父组件接收的值
          </swiper-slide>
        </swiper>
      </div>
    </m-card>
  </div>
</template>
<script>
export default {
  props: {
    title: { type: String, required: true },
    icon: { type: String, required: true },
    categories:{ type: Array, required: true }
  },
  data() {
    return {
        active:0
    };
  },
  // 计算属性
  computed: {},
  created() {},
  methods: {},
};
</script>
<style  scoped>
</style>