vuecli作用域插槽

<template>
  <div id="app" class="container">
    
    <Category title="美食" >
      <template scope="{games}">
        <ul>
            <li v-for="(g, index) in games" :key="index">{{g}}</li>
        </ul>
      </template>
    </Category> 

    <Category title="美食" >
      <template slot-scope="{games}">
        <ol>
            <li v-for="(g, index) in games" :key="index">{{g}}</li>
        </ol>
      </template>
    </Category> 

    <Category title="美食" >
      
      <template slot-scope="xiaobai">
        
        <h4 v-for="(g, index) in xiaobai.games" :key="index">{{g}}</h4>
        
      </template>
    </Category> 
    <!-- <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 scoped>
  .container{
    display: flex;
    justify-content: space-around;
  }

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

 

<template>
  <div id="app" class="container">
    
    <Category title="美食" :listData='foods'>
      <template scope="{games}">
        <ul>
            <li v-for="(g, index) in games" :key="index">{{g}}</li>
        </ul>
      </template>
    </Category> 

    <Category title="美食" :listData='foods'>
      <template slot-scope="{games}">
        <ol>
            <li v-for="(g, index) in games" :key="index">{{g}}</li>
        </ol>
      </template>
    </Category> 

    <Category title="美食" :listData='foods'>
      <template scope="{games}">
        
            <h4 v-for="(g, index) in games" :key="index">{{g}}</h4>
        
      </template>
    </Category> 
    <!-- <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 scoped>
  .container{
    display: flex;
    justify-content: space-around;
  }

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

<template>
  <div class="category">
    <h2 > {{title}}分类</h2>
    <slot :games="games">我是一个默认插槽，没有结构我会出现</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 {
        games:['wow','lol','dota','gta5'],
      }
    },
    props:[
      "listData",
      "title"
    ]
    
}
</script>

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