vuecli默认插槽

<template>
  <div id="app" class="container">
    <Category title="美食" :listData='foods'>
      <img src="https://s3.ax1x.com/2021/01/16/srJ1q0.jpg" alt="">
    </Category>
    <Category title="游戏" :listData='games'>
       <ul>
          <li v-for="(g, index) in games" :key="index">{{g}}</li>
       </ul>
    </Category>
    <Category title="电影" :listData='films'>
      <video controls src="http://vfx.mtime.cn/Video/2019/02/04/mp4/190204084208765161.mp4"></video>
    </Category>
  </div>
</template>

<script>
// import {nanoid} from 'nanoid'
  //引入school 组件
  import Category from './components/Category.vue'

  export default {
    name: 'app',
    components: {
      Category
    },
    data() {
      return {
        foods:['豆腐','白菜','粉条','方便面'],
        games:['wow','lol','dota','gta5'],
        films:['教父','醉拳','叶问','霍元甲']
     
      }
    },
  }
</script>

<style scope>
  .container{
    display: flex;
    justify-content: space-around;
  }

  video{
    width: 100%
  }
  img{
      width: 100%
  }
</style>

<template>
  <div class="category">
    <h2 > {{title}}分类</h2>
    <slot></slot>
    <!-- <ul>
      <li v-for="(item, index) in listData" :key="index">{{item}}</li>
    </ul> -->
  </div>
</template>

<script>
import {nanoid} from 'nanoid'

export default {
    name:"Category",
    data() {
      return {
        
      }
    },
    props:[
      "listData",
      "title"
    ]
    
}
</script>

<style scope>
    .category{
      background-color: aqua;
      width: 200px;
      height: 300px;
    }
    h2{
      text-align: center;
      background-color: orange;
    }
</style>