vue的slot插槽

*插槽的作用：让父组件可以向子组件指定位置插入html结构

1.默认插槽

        1.子组件：

<template>
  <div class="cate">
    <h3 class="head">{{title}}分类</h3>
    <slot></slot>
  </div>
</template>

<script>
export default {
    props:['title']
}
</script>

<style scoped>
    .head{
        text-align:center;
        font-weight: bold;
        background-color: coral;
        width: 100%;
        
    }
    .cate{
        width: 200px;
        height: 300px;
        background-color: skyblue;
        margin-left: 50px;
        margin-top: 20px;
        padding-top:15px
    }
</style>

        2.父组件：

<template>
  <div class="container">
      <category title='美食'>
          <img src='https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp8.itc.cn%2Fimages01%2F20210615%2F740e6f601ddd4c9db3d9a11183dc4148.jpeg&refer=http%3A%2F%2Fp8.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1649405874&t=5d197bf13838a96320fd03f12e0353fb' alt=''>
      </category>
      <category title="游戏">
          <ul>
              <li v-for="(game,index) in games" :key="index">{{game}}</li>
          </ul>
      </category>
      <category title="电影">
          <video controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
      </category>
  </div>
</template>

<script>
import Category from './components/Category.vue'
export default {
  components: { Category },
  data() {
      return {
          foods:['火锅','烧烤','小龙虾','牛排'],
          games:['打地鼠','俄罗斯方块','王者荣耀','英雄联盟'],
          films:['《夏洛特烦恼》','《温暖的抱抱》','《你好李焕英》','《钢铁侠》']

      }
  },

}
</script>

<style>
    video{
        width: 100%;
        height: 60%;
    }
    img{
        width: 100%;
        height: 60%;
    }
    .container{
        display:flex ;
        justify-content: space-around;
    }
</style>

2.具名插槽

        1.子组件：

<template>
  <div class="cate">
    <h3 class="head">{{title}}分类</h3>
    <slot name="center"></slot>
    <slot name="footer"></slot>
  </div>
</template>

<script>
export default {
    props:['title']
}
</script>

        2.父组件：

<template>
  <div class="container">
      <category title='美食'>
          <img slot="center" src='https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp8.itc.cn%2Fimages01%2F20210615%2F740e6f601ddd4c9db3d9a11183dc4148.jpeg&refer=http%3A%2F%2Fp8.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1649405874&t=5d197bf13838a96320fd03f12e0353fb' alt=''>
        <a class='foot' slot="footer" href="http://www.baidu.com">更多美食</a>
      </category>
      <category title="游戏">
          <ul slot="center">
              <li v-for="(game,index) in games" :key="index">{{game}}</li>
          </ul>
          <div class='foot' slot="footer" >
            <a href="http://www.baidu.com">单机游戏 </a>
            <a href="http://www.baidu.com"> 网络游戏</a>
          </div>
      </category>
      <category title="电影">
          <video slot="center" controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
          <div class="foot" slot="footer">
              <a href="http://www.baidu.com">经典</a>
              <a href="http://www.baidu.com">热门</a>
              <a href="http://www.baidu.com">推荐</a>
          </div>
      </category>
  </div>
</template>

<script>
import Category from './components/Category.vue'
export default {
  components: { Category },
  data() {
      return {
          foods:['火锅','烧烤','小龙虾','牛排'],
          games:['打地鼠','俄罗斯方块','王者荣耀','英雄联盟'],
          films:['《夏洛特烦恼》','《温暖的抱抱》','《你好李焕英》','《钢铁侠》']

      }
  },

}
</script>

3.作用域插槽

        1.自组件：

<template>
  <div class="cate">
    <h3 class="head">{{title}}分类</h3>
    <!-- 通过插槽传递数据 -->
    <slot :games="games"></slot>
  </div>
</template>

<script>
export default {
    props:['title'],
      data() {
      return {
          games:['打地鼠','俄罗斯方块','王者荣耀','英雄联盟'],
      }
  },
}
</script>

        2.父组件：

<template>
  <div class="container">
      <category title="游戏">
          <!--必须用template -->
          <!-- scope接收数据，接收到的是一个对象 -->
          <template scope="gamesObj">
            <ul>
              <li v-for="(game,index) in gamesObj.games" :key="index">{{game}}</li>
            </ul>
          </template>
      </category>
      <category title="游戏">
          <!--必须用template -->
          <!-- scope接收数据，接收到的是一个对象 -->
          <template scope="gamesObj">
            <ol>
              <li v-for="(game,index) in gamesObj.games" :key="index">{{game}}</li>
            </ol>
          </template>
      </category>
            <category title="游戏">
          <!--必须用template -->
          <!-- scope接收数据，接收到的是一个对象 -->
          <template scope="gamesObj">
            <ul>
              <h4 v-for="(game,index) in gamesObj.games" :key="index">{{game}}</h4>
            </ul>
          </template>
      </category>
  </div>
</template>

<script>
import Category from './components/Category.vue'
export default {
  components: { Category }
}
</script>