这篇“Vue中的插槽怎么使用”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“Vue中的插槽怎么使用”文章吧。
首先做一个页面：
新增 Category.vue
<template>
<div class="category">
<h4>{{title}}分类</h4>
<ul>
<li v-for="(item,index) in listData" :key="index">{{item}}</li>
</ul>
</div>
</template>
<script>
export default {
name: "Category",
props:["title","listData"]
}
</script>
<style scoped>
.category{
background-color: skyblue;
width: 200px;
height: 300px;
}
h4{
text-align: center;
background-color: orange;
}
</style>App.vue 中使用
<template>
<div class="container">
<Category title="美食" :listData="foods"/>
<Category title="游戏" :listData="games"/>
<Category title="电影" :listData="films"/>
</div>
</template>
<script>
import Category from "@/components/Category";
export default {
name: 'App',
components: {Category},
data(){
return{
foods:["火锅","烧烤","小龙虾","牛排"],
games:["劲舞团","QQ飞车","超级玛丽","无人深空"],
films:["《教父》","《狩猎》","《禁闭岛》","《聚焦》"]
}
}
}
</script>
<style>
.container {
display: flex;
justify-content: space-around;
}
</style>现在修改需求，每个分类都要展示不同的内容：
这里就用到了插槽，修改 Category.vue
<template>
<div class="category">
<h4>{{title}}分类</h4>
<slot></slot>
</div>
</template>
<script>
export default {
name: "Category",
props:["title"]
}
</script>
<style scoped>
.category{
background-color: skyblue;
width: 200px;
height: 300px;
}
h4{
text-align: center;
background-color: orange;
}
</style>修改 App.vue
<template>
<div class="container">
<Category title="美食" :listData="foods">
<img src="https://img2.baidu.com/it/u=2073611229,1921777437&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=675"/>
</Category>
<Category title="游戏" :listData="games">
<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"/>
</Category>
</div>
</template>
<script>
import Category from "@/components/Category";
export default {
name: 'App',
components: {Category},
data(){
return{
foods:["火锅","烧烤","小龙虾","牛排"],
games:["劲舞团","QQ飞车","超级玛丽","无人深空"],
films:["《教父》","《狩猎》","《禁闭岛》","《聚焦》"]
}
}
}
</script>
<style>
.container {
display: flex;
justify-content: space-around;
}
img,video{
width: 100%;
}
</style>修改 Category.vue
<template>
<div class="category">
<h4>{{title}}分类</h4>
<slot name="center">这是一些默认值，没有内容时展示</slot>
<slot name="footer">这是一些默认值，没有内容时展示</slot>
</div>
</template>
<script>
export default {
name: "Category",
props:["title"]
}
</script>
<style scoped>
.category{
background-color: skyblue;
width: 200px;
height: 300px;
}
h4{
text-align: center;
background-color: orange;
}
</style>修改 App.vue
<template>
<div class="container">
<Category title="美食" :listData="foods">
<img slot="center" src="https://img2.baidu.com/it/u=2073611229,1921777437&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=675"/>
<a slot="footer" href="https://www.baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >更多美食</a>
</Category>
<Category title="游戏" :listData="games">
<ul slot="center">
<li v-for="(g,index) in games" :key="index">{{g}}</li>
</ul>
<div class="foot" slot="footer">
<a href="https://www.baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >单机游戏</a>
<a href="https://www.baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >网络游戏</a>
</div>
</Category>
<Category title="电影">
<video slot="center" controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"/>
<!--v-slot 只有template能用-->
<template v-slot:footer>
<div class="foot" slot="footer">
<a href="https://www.baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >经典</a>
<a href="https://www.baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >热门</a>
<a href="https://www.baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >推荐</a>
</div>
</template>
</Category>
</div>
</template>
<script>
import Category from "@/components/Category";
export default {
name: 'App',
components: {Category},
data(){
return{
foods:["火锅","烧烤","小龙虾","牛排"],
games:["劲舞团","QQ飞车","超级玛丽","无人深空"],
films:["《教父》","《狩猎》","《禁闭岛》","《聚焦》"]
}
}
}
</script>
<style>
.container,.foot {
display: flex;
justify-content: space-around;
}
img,video{
width: 100%;
}
</style>
如果数据在 Category 中，但需要展示不同的形式，我们可以通过插槽传值，类似于我们从父组件向子组件传值：
<template>
<div class="category">
<h4>{{ title }}分类</h4>
<slot :games="games" :msg="hello"></slot>
</div>
</template>
<script>
export default {
name: "Category",
props: ["title"],
data() {
return {
games: ["劲舞团", "QQ飞车", "超级玛丽", "无人深空"]
}
}
}
</script>
<style scoped>
.category {
background-color: skyblue;
width: 200px;
height: 300px;
}
h4 {
text-align: center;
background-color: orange;
}
</style>App 中在子组件中使用 <template> 包裹要展示的内容，标签中可以使用scope接收传过来的值
<template>
<div class="container">
<Category title="游戏">
<template v-slot="receiveValue">
<ul>
<li v-for="(g,index) in receiveValue.games" :key="index">{{ g }}</li>
</ul>
<a>{{ receiveValue.msg }}</a>
</template>
</Category>
<Category title="游戏">
<template v-slot="{games,msg}">
<ol>
<li v-for="(g,index) in games" :key="index">{{ g }}</li>
</ol>
<a>{{ msg }}</a>
</template>
</Category>
<Category title="游戏">
<template v-slot="{games,msg}">
<h5 v-for="(g,index) in games" :key="index">{{ g }}</h5>
<a>{{ msg }}</a>
</template>
</Category>
</div>
</template>
<script>
import Category from "@/components/Category";
export default {
name: 'App',
components: {Category},
}
</script>
<style>
.container, .foot {
display: flex;
justify-content: space-around;
}
img, video {
width: 100%;
}
</style>1.作用：让父组件可以向子组件指定位置插入 html 结构，也是一种组件问通信的方式，适用于父组件==>子组件
2.分类：默认插槽、具名插槽、作用域插槽
3.使用方式：
默认插槽
父组件中：
<Category> <div>html结构</div> <Category>
子组件中：
<template> <div> <!--定义插槽--> <slot>插槽默认内容...</slot> </div> </templdte>
具名插槽
父组件中：
<Category> <template slot="center"> <div>html结构1</div> </template> <tenplate v-slot:footer> <div>html结构2</div> </template> </Category>
子组件中：
<template> <div> <1--定义插槽--> <slot name="center">插槽默认内容...</slot> <slot name="footer”>插槽默认内容...</slot> </div> </template>
作用域插槽
1.理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定，(games 数据在 Category 组件中，但使用数据所遍历出来的结构由 App 组件决定)
2.具体编码：
父组件中：
<category>
<template v-slot="scopeData"
<!--生成的是ul列表-->
<ul>
<li v-for="g in scopeDsta.games" : key="g">{g}</li>
</ul>
</template>
</Category>
<Category>
<template v-slot={scopeData}>
<!--生成的是h5标题-->
<h5 v-for="g in scopeData" :key="g">{{g}}</h5>
</template>
</Category>子组件中：
<template>
<div>
<slot :games="games"></slot>
</div>
</template>
<script>
export default{
name: "Category ',
props: ["title"],
//数据在子组件自身
data() {
return{
games:['红色警戒,穿越火线',"劲舞团",超级玛丽"]
}
}
}</script>注意：scope和slot-scope过时了，可以使用v-slot
以上就是关于“Vue中的插槽怎么使用”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
