这篇“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>插槽总结
作用：让父组件可以向子组件指定位置插入 html 结构，也是一种组件问通信的方式，适用于父组件==>子组件
分类：默认插槽、具名插槽、作用域插槽
使用方式：
默认插槽
父组件中：
<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>作用域插槽
理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定，(games 数据在 Category 组件中，但使用数据所遍历出来的结构由 App 组件决定)
具体编码：
父组件中：
<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中的插槽怎么使用”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网行业资讯频道。
