Vue插槽---默认插槽、具名插槽、作用域插槽

浅浅的花香味﹌ 2024-04-06 10:08 88阅读 0赞

**目录**

总结

1.默认插槽

2.具名插槽

3.作用域插槽

一、不使用插槽的效果

App.vue

Category.vue

二、默认插槽

App.vue

Category.vue

三、具名插槽

App.vue

Category.vue

四、作用域插槽

App.vue

Category.vue

--------------------

## 总结 ##

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

分类：默认插槽、具名插槽、作用域插槽

使用：

####  **1.默认插槽** ####

![553842c8a0aa48d7818f0fd4f521d57e.png][]

####  **2.具名插槽** ####

![6ecc18298ed44b37afceaaafe4e80a31.png][]

#### 3.作用域插槽 ####

作用域插槽也可以有名字

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

![fbe4f97ea69b43958fb3acaf27f8b7b3.png][]

![ecdb041c3bad41ddb673edf9c491d394.png][]

## 一、不使用插槽的效果 ##

![4bda280d818a4dc2ae5ec93bc829b7b9.png][]

### App.vue ###

<template>
       
       <div class="container">
          <Category title="美食" :listData="foods" ></Category>
          <Category title="游戏" :listData="games"></Category>
          <Category title="电影" :listData="films"></Category>
       </div>
    </template>
    
    <script>
    import Category from './components/Category.vue';
    
       export default{
        name:"App",
        data(){
          return{
            foods:['火锅','烧烤','小龙虾','牛排'],
            games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
            films:['《教父》','《拆弹专家》','《你好，李焕英》']
          }
        },
        components: { 
            Category 
        }
    }
    
    </script>
    
    <style lang="css">
        .container{
            /* 弹性布局 */
            display: flex;
            /*  */
            justify-content: space-around;
        }
    </style>

### Category.vue ###

<template>
        <div class="category">
            <h3>{
       {title}}分类</h3>
            <ul>
                <li v-for="(item,index) in listData" :key="index">{
       {item}}</li>
            </ul>
        </div>
    </template>
    
    <script>
    
       export default{
          name:'Category',
          props:['listData','title']
       }
    </script>
    
    
    <style scoped>
        .category{
            background-color:skyblue ;
            width:200px;
            height:300px;
        }
        h3{
            text-align:center;
            background-color: orange;
        }
    </style>

## 二、默认插槽 ##

![69c37ddc4a994b198ffbbe84206f9147.png][]

### App.vue ###

<template>
       
       <div class="container">
          <Category title="美食" >
            <img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
          </Category>
    
          <Category title="游戏" >
            <ul>
                <li v-for="(g,index) in games" :key="index">{
       {g}}</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{
        name:"App",
        data(){
          return{
            foods:['火锅','烧烤','小龙虾','牛排'],
            games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
            films:['《教父》','《拆弹专家》','《你好，李焕英》']
          }
        },
        components: { 
            Category 
        }
    }
    
    </script>
    
    <style lang="css">
    
        .container{
            /* 弹性布局 */
            display: flex;
            /*  */
            justify-content: space-around;
        }
    </style>

###  ###

### Category.vue ###

<template>
        <div class="category">
            <h3>{
       {title}}分类</h3>
            
            <slot>我是默认值，当使用者没有传递具体结构时，我会出现</slot>
    
        </div>
    </template>
    
    <script>
    
       export default{
          name:'Category',
          props:['title']
       }
    </script>
    
    
    <style scoped>
            video{
            width: 100%;
        }
        img{
            width: 100%;
        }
        .category{
            background-color:skyblue ;
            width:200px;
            height:300px;
        }
        h3{
            text-align:center;
            background-color: orange;
        }
    </style>

## 三、具名插槽 ##

![f8173521ab3641c7a463f9732c8a2cc5.png][]

### App.vue ###

<template>
       
       <div class="container">
          <Category title="美食" >
            <img slot="center" src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
            <a slot="footer" href="http://www.atguigu.com">更多美食</a>
          </Category>
    
          <Category title="游戏" >
            <ul slot="center">
                <li v-for="(g,index) in games" :key="index">{
       {g}}</li>
                 
            </ul>
            <div class="foot" slot="footer">
                <a  href="http://www.atguigu.com">单机游戏</a>
                <a href="http://www.atguigu.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.atguigu.com">经典</a>
                <a href="http://www.atguigu.com">热门</a>
                <a  href="http://www.atguigu.com">推荐</a>
            </div>
          </Category>
       </div>
    </template>
    
    <script>
    import Category from './components/Category.vue';
    
       export default{
        name:"App",
        data(){
          return{
            foods:['火锅','烧烤','小龙虾','牛排'],
            games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
            films:['《教父》','《拆弹专家》','《你好，李焕英》']
          }
        },
        components: { 
            Category 
        }
    }
    
    </script>
    
    <style lang="css">
         
        .container,.foot{
            /* 弹性布局 */
            display: flex;
            /*  */
            justify-content: space-around;
        }
    </style>

###  ###

### Category.vue ###

<template>
        <div class="category">
            <h3>{
       {title}}分类</h3>
            
            <slot name="center">我是默认值，当使用者没有传递具体结构时，我会出现</slot>
            <slot name="footer">我是默认值，当使用者没有传递具体结构时，我会出现</slot>
    
        </div>
    </template>
    
    <script>
    
       export default{
          name:'Category',
          props:['title']
       }
    </script>
    
    
    <style scoped>
            video{
            width: 100%;
        }
        img{
            width: 100%;
        }
        .category{
            background-color:skyblue ;
            width:200px;
            height:300px;
        }
        h3{
            text-align:center;
            background-color: orange;
        }
    </style>

## 四、作用域插槽 ##

![62d24bfac7c447c88fdaf2a3bf5683d4.png][]

### App.vue ###

<template>
       
       <div class="container">
    
    
          <Category title="游戏" >
            
            
            <template scope="games">
              <ul slot="center">
                <li v-for="(g,index) in games.games" :key="index">{
       {g}}</li>
            </ul>
            </template>
          </Category>
    
          <Category title="游戏" >
            <template scope="games">
              <ol slot="center">
                <li v-for="(g,index) in games.games" :key="index">{
       {g}}</li>
            </ol>
            </template>
          </Category>
    
          <Category title="游戏" >
            <template scope="{games}">
              
              <h4 v-for="(g,index) in games" :key="index">{
       {g}}</h4>
    
            </template>
          </Category>
    
    
    
    
       </div>
    </template>
    
    <script>
    import Category from './components/Category.vue';
    
       export default{
        name:"App",
    
        components: { 
            Category 
        }
    }
    
    </script>
    
    <style lang="css">
         
        .container,.foot{
            /* 弹性布局 */
            display: flex;
            /*  */
            justify-content: space-around;
        }
    </style>

### Category.vue ###

<template>
        <div class="category">
            <h3>{
       {title}}分类</h3>
            
            
            <slot :games="games" msg="hello">我是默认值，当使用者没有传递具体结构时，我会出现</slot>
    
    
        </div>
    </template>
    
    <script>
    
       export default{
          name:'Category',
          props:['title'],
          data(){
            return{
              games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
            }
           },
       }
    </script>
    
    
    <style scoped>
            video{
            width: 100%;
        }
        img{
            width: 100%;
        }
        .category{
            background-color:skyblue ;
            width:200px;
            height:300px;
        }
        h3{
            text-align:center;
            background-color: orange;
        }
    </style>

[553842c8a0aa48d7818f0fd4f521d57e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/2ebd1bb154d24420a8bf12a6783f0517.png
[6ecc18298ed44b37afceaaafe4e80a31.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/031ac774ec4c42aa85962c4872c8feb4.png
[fbe4f97ea69b43958fb3acaf27f8b7b3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/d0995c1926a14da8aba0dd7ebfef2705.png
[ecdb041c3bad41ddb673edf9c491d394.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/099c5de47de745d7965d345079016e82.png
[4bda280d818a4dc2ae5ec93bc829b7b9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/71a494326ef342d38da18ebae557155f.png
[69c37ddc4a994b198ffbbe84206f9147.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/ed9649414c974282861744735fc2c324.png
[f8173521ab3641c7a463f9732c8a2cc5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/2ea6c302595240498e85f5420cf3cb77.png
[62d24bfac7c447c88fdaf2a3bf5683d4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/c7a01c86fe394706bd96498cb28e38db.png