【Vue】 第十六部分 插槽（默认插槽、具名插槽、作用域插槽）

【Vue】 第十六部分 插槽（默认插槽、具名插槽、作用域插槽）

---

---

16 . 插槽

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

16.1 默认插槽

16.1.1 不使用插槽的案例图示

App组件

<template>
    <div class="box">
        <category :listdata = "food" title="美食"></category>
        <category :listdata = "game" title="游戏"></category>
        <category :listdata = "movie" title="电影"></category>
    </div>
</template>

<script>
import Category from './components/category.vue'
export default {
    components:{Category},
    data(){
        return{
            food:["兰州拉面","烤羊肉","披萨","锅边糊"],
            game:["英雄联盟","和平精英","原神","我的世界"],
            movie:["你好,李焕英","西虹市首富","这个杀手不太冷静","拳王妈妈"]
            
        }
    }
}
</script>

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

</style>

category组件

<template>
    <div class="wrapper">
        <h1>{{title}}</h1>
        <ul>
            <li v-for="(list,index) in listdata" :key="index">{{list}}</li>
        </ul>
    </div>
</template>

<script>
export default {
    props:["listdata","title"]
}
</script>

<style scoped>
    .wrapper{
        width: 400px;
        height:500px;
        background-color: bisque;
    }
    h1{
        text-align: center;
        margin-bottom: 60px;
    }
    ul
    {
        padding: 0;
    }
    li{
        text-align: center;
        list-style: none;
        font-size: 30px;
        margin-top: 20px;
    }
</style>

16.1.2 默认插槽

需求：给美食加图片，给电影加视频，游戏不变

16.1.3 默认插槽的结构和案例

在父组件中使用子组件标签，在子组件标签中写html结构，html结构将根据slot（插槽）的位置进行插入

父组件：
<category>
	<div>html结构</div>
</category>

子组件：
<category>
  //定义插槽
  <slot>可以指定默认内容</slot>
</category>

App.vue

<template>
    <div class="box">
        <category title="美食">
            <img 			src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg09.viwik.com%2Fimages%2F20180701%2Ftooopen_sy_052538253829965.jpg&refer=http%3A%2F%2Fimg09.viwik.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648649484&t=4396d8c36bd8f4802c6ad8498ca83cca" alt="">
        </category>

        <category title="游戏">
          <ul>
          <li v-for="(g,index) in game" :key="index">{{g}}</li>
					</ul>
				</category>

        <category title="电影">
            <video controls src="https://www.bilibili.com/bangumi/play/ep430726?spm_id_from=333.1007.partition_recommend"></video>
        </category>
    </div>
</template>

<script>
import Category from './components/category.vue'
export default {
    components:{Category},
    data(){
        return{
            food:["兰州拉面","烤羊肉","披萨","锅边糊"],
            game:["英雄联盟","和平精英","原神","我的世界"],
            movie:["你好,李焕英","西虹市首富","这个杀手不太冷静","拳王妈妈"]
        }
    }
}
</script>

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

</style>

category组件

<template>
    <div class="wrapper">
        <h1>{{title}}</h1>
        <slot></slot>
    </div>
</template>

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

<style scoped>
    .wrapper{
        width: 400px;
        height:500px;
        background-color: bisque;
    }
    h1{
        text-align: center;
        margin-bottom: 60px;
    }
    ul
    {
        padding: 0;
    }
    li{
        text-align: center;
        list-style: none;
        font-size: 30px;
        margin-top: 20px;
    }
    img{
        width: 100%;
    }
    video{
        width: 100%;
    }
</style>

16.2 具名插槽

16.2.1 具名插槽案例示图

定义：顾名思义就是给插槽取名

需求：使用多个插槽分别放在中间和和底部

16.2.2 具名插槽的结构和案例

和默认插槽相比就是多了个取名，将html结构放到指定的插槽里

父组件：
<category>
  <template slot = "xxx">
		<div>html结构</div>
	</template>
</category>

<category>
  <template v-slot:yyy>  //注意：v-slot只能在template中使用
		<div>html结构</div>
	</template>
</category>

子组件：
<category>
  //定义插槽
  <slot name = "xxx">可以指定默认内容</slot>
  <slot name = "yyy">可以指定默认内容</slot>
</category>

App组件

<template>
    <div class="box">
        <category title="美食">
            <!-- 使用slot -->
            <img slot="center" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg09.viwik.com%2Fimages%2F20180701%2Ftooopen_sy_052538253829965.jpg&refer=http%3A%2F%2Fimg09.viwik.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648649484&t=4396d8c36bd8f4802c6ad8498ca83cca" alt="">
            <div class="food"  slot="footer">
                <a href="#" target="_blank" class="food">更多美食</a>
            </div>
        </category>

        <category title="游戏">
            <ul slot="center">  //使用插槽
                <li v-for="(g,index) in game" :key="index">{{g}}</li>
            </ul>

            <div slot="footer" class="foot">
                <a href="#" target="_blank">热门</a>
                <a href="#" target="_blank">更多</a>
            </div>
           
            </category>

        <category title="电影">
            <video slot="center" controls 	src="https://v.qq.com/x/cover/mzc00200a1yhq29.html?sf=uri"></video>
               <!-- 在这里说一下2.6版本引入的，v-slot:插槽名，但是只能使用在template上 -->
               <template v-slot:footer>
                   <div class="inter">
                        <a href="#" target="_blank">推荐</a>
                        <a href="#" target="_blank">最近上映</a>
                        <a href="#" target="_blank">热门</a>
                    </div>
                    <h4 slot="footer">欢迎来影院观看！</h4>
               </template>
        </category>
    </div>
</template>

<script>
import Category from './components/category.vue'
export default {
    components:{Category},
    data(){
        return{
            food:["兰州拉面","烤羊肉","披萨","锅边糊"],
            game:["英雄联盟","和平精英","原神","我的世界"],
            movie:["你好,李焕英","西虹市首富","这个杀手不太冷静","拳王妈妈"]
        }
    }
}
</script>

<style>
.box,.foot,.inter{
    display: flex;
    justify-content: space-around;
}

.foot,.inter{
    margin: 0 auto;
    margin-top: 50px ;
    width: 100px;
    font-size: 20px;
}
.food{
    margin-top: 50px;
    text-align: center;
}
.inter{
    width: 200px;
}
h4{
    text-align: center;
}

</style>

category组件

<template>
    <div class="wrapper">
        <h1>{{title}}</h1>     
           <!-- 
               具名插槽
               也就是给插槽取名字
               下面的写法就是给slot取名
           -->
           <slot name="center"></slot>
           <slot name="footer"></slot>      
    </div>
</template>

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

<style scoped>
    .wrapper{
        width: 400px;
        height:500px;
        background-color: bisque;
    }
    h1{
        text-align: center;
        margin-bottom: 60px;
    }
    ul
    {
        padding: 0;
    }
    li{
        text-align: center;
        list-style: none;
        font-size: 30px;
        margin-top: 20px;
    }
    img{
        width: 100%;
    }
    video{
        width: 100%;
    }
</style>

16.3 作用域插槽

games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定

适用：数据不在操作的组件中，可以通过作用域插槽进行通信

说明：

1. scope取的名可以随便取名
2. 返回的是一个对象,所以在使用的时候是 Tree.games
3. scope必须要配合template使用才可以
4. 作用域插槽也可以取名

16.3.1 案例示图

需求：遍历不同的结构，且数据不在App组件中，在game组件中

App组件

<template>
    <div class="box">

        <game title="游戏">
          // 接收插槽传入的数据 
           <template scope="Tree">
                <ul>
                    <li v-for="(g,index) in Tree.games" :key="index">{{g}}</li>
                </ul>
           </template>
        </game>

        <game title="游戏">
           <template scope="Tree">
                <ol>
                    <li v-for="(g,index) in Tree.games" :key="index">{{g}}</li>
                </ol>
           </template>
        </game>

        <game title="游戏">
           <template scope="Tree">
                    <h4 v-for="(g,index) in Tree.games" :key="index">{{g}}</h4>       
           </template>
        </game>
        
    </div>
</template>

<script>
import game from "./components/game.vue"
export default {
    components:{game}
}
</script>

<style>
   .box{
       display: flex;
       justify-content: space-around;
   }
</style>

game组件

<template>
    <div class="wrapper">
        <h2>{{title}}</h2>
        <slot :games="games"></slot>
    </div>
</template>

<script>
export default {
    props:["title"],
    data(){
        return{
            games:["和平精英","原神","英雄联盟","饥荒"]
        }
    }
}
</script>

<style scoped>
    .wrapper{
        width: 300px;
        height: 400px;
        background-color: antiquewhite;
        text-align: center;
    }
    ul,ol
    {
        padding:0;
        text-align: left;
        font-size: 20px;
        padding-left: 30px;
    }
 

</style>

---

总结

以上就是今天要讲的内容，本文介绍了默认插槽、具名插槽、作用域插槽的使用方法，希望对大家有所帮助！