day92 - 插槽

插槽

介绍

作用：让父组件可以向子组件指定位置插入HTML结构，是一种组件间通信的方式，适用于父组件==>子组件

分类

默认插槽，具名插槽，作用域插槽

默认插槽

子组件

title从父组件接受数据

 <slot></slot>
 表示app中的插槽插到这里

 

<template>
   <div class="category">
     <h3>{{title}}分类</h3>
     <slot></slot>
   </div>
 </template>
 ​
 <script>
 export default {
   name: "CategoryCom",
   props:['title']
 }
 </script>
 ​
 <style scoped>
 .category{
   background-color: skyblue;
   width: 200px;
   height: 300px;
 }
 h3{
   text-align: center;
   background-color: orange;
 }
 img{
   width: 100%;
 }
 </style>

 

app组件

在子组件标签中配置传递的参数（title），在组件标签中间配置HTML代码

此时可以使用app中的数据

<template>
     <div class="container">
       <CategoryCom title="美食">
         <img src="https://img1.baidu.com/it/u=2904943647,2488029501&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=318">
       </CategoryCom>
       <CategoryCom title="游戏">
         <ul>
           <li v-for="(item,index) in games" :key="index">{{item}}</li>
         </ul>
       </CategoryCom>
       <CategoryCom title="电影">
         <video src="https://www.bilibili.com/video/BV1ke4y1c7En?t=0.0"></video>
       </CategoryCom>
     </div>
 </template>
 ​
 <script>
 import CategoryCom from "@/components/CategoryCom";
 export default {
   name: "App",
   components: {CategoryCom},
   data(){
     return{
       foods: ['火锅', '烧烤', '小龙虾'],
       games: ['红色警戒', '穿越火线', '劲舞团'],
       films: ['《教父》', '《拆弹专家》', '《你好，李焕英》']
     }
   }
 ​
 }
 </script>

 

具名插槽

子组件

在slot标签中设置对应的名字

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

 

app

设置对应的名字，显示不同的位置

 <template>
     <div class="container">
       <CategoryCom title="美食">
         <img slot="center" src="https://img1.baidu.com/it/u=2904943647,2488029501&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=318">
         <a slot="footer" href="http://www.bilibili.com">更多美食</a>
       </CategoryCom>
       <CategoryCom title="游戏">
         <ul slot="center">
           <li v-for="(item,index) in games" :key="index">{{item}}</li>
         </ul>
         <div slot="footer" class="foot">
           <a href="https://www.bilibili.com">单机游戏</a>
           <a href="https://www.bilibili.com">网络游戏</a>
         </div>
       </CategoryCom>
       <CategoryCom title="电影">
         <img slot="center" src="https://img2.baidu.com/it/u=1117671912,191880111&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500">
        <template v-slot:footer>
          <div class="foot">
            <a href="https://www.bilibili.com">经典</a>
            <a href="https://www.bilibili.com">热门</a>
            <a href="https://www.bilibili.com">推荐</a>
          </div>
          <h4>欢迎前来观影</h4>
        </template>
       </CategoryCom>
     </div>
 </template>

 

作用域插槽

数据在组件自身，根据数据生成的结构需要组建的使用者来决定

子组件

 <template>
   <div class="category">
     <h3>{{title}}分类</h3>
     <slot :games="games"></slot>
   </div>
 </template>
 ​
 <script>
 export default {
   name: "CategoryCom",
   props:['title'],
   data(){
     return{
       games: ['红色警戒', '穿越火线', '劲舞团'],
     }
   }
 }
 </script>

 

app

<template>
     <div class="container">
       <CategoryCom title="游戏">
         <template scope="gugu">
           <ul>
             <li v-for="(item,index) in gugu.games" :key="index">{{item}}</li>
           </ul>
         </template>
       </CategoryCom>
 ​
       <CategoryCom title="游戏">
         <template scope="gugu">
           <ol>
             <li style="color: red" v-for="(item,index) in gugu.games" :key="index">{{item}}</li>
           </ol>
         </template>
       </CategoryCom>
 ​
       <CategoryCom title="游戏">
         <template scope="gugu">
           <h4 v-for="(item,index) in gugu.games" :key="index">{{item}}</h4>
         </template>
 ​
       </CategoryCom>
     </div>
 </template>

 

总结

 插槽：
 1.作用：让父组件可以向子组件指定位置插入HTML结构，是一种组件间通信的方式，适用于父组件==>子组件
 2.分类：默认插槽，具名插槽，作用域插槽
 3.使用方式：
     1.默认插槽：
     父：
         <CategoryCom title="美食">
           html结构
         </CategoryCom>
     子：
         <template>
           <div>
             <slot>默认内容</slot>
           </div>
         </template>
     2.具名插槽：
     父：
         <CategoryCom title="电影">
            <template v-slot:footer>
              <div class="foot">
                HTML结构
              </div>
            </template>
         </CategoryCom>
     子：
         <slot name="center"></slot>
         <slot name="footer"></slot>
     3.作用域插槽：
         数据在组件自身，但根据数据生成的结构需要组件的使用者来决定
     父：
         <CategoryCom title="游戏">
             <template scope="gugu">
               <ul>
                 <li v-for="(item,index) in gugu.games" :key="index">{{item}}</li>
               </ul>
             </template>
         </CategoryCom>
     子：
     <template>
       <div class="category">
         <h3>{{title}}分类</h3>
         <slot :games="games"></slot>
       </div>
     </template>
 ​
     data(){
         return{
           games: ['红色警戒', '穿越火线', '劲舞团'],
         }
       }