插槽
介绍
作用：让父组件可以向子组件指定位置插入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: ['红色警戒', '穿越火线', '劲舞团'],
}
}
标签：title,插槽,app,item,组件,CategoryCom,day92 From： https://www.cnblogs.com/GUGUZIZI/p/17219547.html