Vue中的插槽怎么使用
Vue中的插槽怎么使用
这篇“Vue中的插槽怎么使用”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“Vue中的插槽怎么使用”文章吧。
默认插槽
首先做一个页面：
新增 Category.vue
<template><divclass="category"><h4>{{title}}分类</h4><ul><liv-for="(item,index)inlistData":key="index">{{item}}</li></ul></div></template><script>exportdefault{name:"Category",props:["title","listData"]}</script><stylescoped>.category{background-color:skyblue;width:200px;height:300px;}h4{text-align:center;background-color:orange;}</style>
App.vue 中使用
<template><divclass="container"><Categorytitle="美食":listData="foods"/><Categorytitle="游戏":listData="games"/><Categorytitle="电影":listData="films"/></div></template><script>importCategoryfrom"@/components/Category";exportdefault{name:'App',components:{Category},data(){return{foods:["火锅","烧烤","小龙虾","牛排"],games:["劲舞团","QQ飞车","超级玛丽","无人深空"],films:["《教父》","《狩猎》","《禁闭岛》","《聚焦》"]}}}</script><style>.container{display:flex;justify-content:space-around;}</style>
现在修改需求，每个分类都要展示不同的内容：
这里就用到了插槽，修改 Category.vue
<template><divclass="category"><h4>{{title}}分类</h4><slot></slot></div></template><script>exportdefault{name:"Category",props:["title"]}</script><stylescoped>.category{background-color:skyblue;width:200px;height:300px;}h4{text-align:center;background-color:orange;}</style>
修改 App.vue
<template><divclass="container"><Categorytitle="美食":listData="foods"><imgsrc="https://img2.baidu.com/it/u=2073611229,1921777437&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=675"/></Category><Categorytitle="游戏":listData="games"><ul><liv-for="(g,index)ingames":key="index">{{g}}</li></ul></Category><Categorytitle="电影"><videocontrolssrc="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"/></Category></div></template><script>importCategoryfrom"@/components/Category";exportdefault{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><divclass="category"><h4>{{title}}分类</h4><slotname="center">这是一些默认值，没有内容时展示</slot><slotname="footer">这是一些默认值，没有内容时展示</slot></div></template><script>exportdefault{name:"Category",props:["title"]}</script><stylescoped>.category{background-color:skyblue;width:200px;height:300px;}h4{text-align:center;background-color:orange;}</style>
修改 App.vue
<template><divclass="container"><Categorytitle="美食":listData="foods"><imgslot="center"src="https://img2.baidu.com/it/u=2073611229,1921777437&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=675"/><aslot="footer"href="https://www.baidu.com"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow">更多美食</a></Category><Categorytitle="游戏":listData="games"><ulslot="center"><liv-for="(g,index)ingames":key="index">{{g}}</li></ul><divclass="foot"slot="footer"><ahref="https://www.baidu.com"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow">单机游戏</a><ahref="https://www.baidu.com"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow">网络游戏</a></div></Category><Categorytitle="电影"><videoslot="center"controlssrc="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"/><!--v-slot只有template能用--><templatev-slot:footer><divclass="foot"slot="footer"><ahref="https://www.baidu.com"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow">经典</a><ahref="https://www.baidu.com"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow">热门</a><ahref="https://www.baidu.com"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow">推荐</a></div></template></Category></div></template><script>importCategoryfrom"@/components/Category";exportdefault{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><divclass="category"><h4>{{title}}分类</h4><slot:games="games":msg="hello"></slot></div></template><script>exportdefault{name:"Category",props:["title"],data(){return{games:["劲舞团","QQ飞车","超级玛丽","无人深空"]}}}</script><stylescoped>.category{background-color:skyblue;width:200px;height:300px;}h4{text-align:center;background-color:orange;}</style>
App 中在子组件中使用 <template> 包裹要展示的内容，标签中可以使用scope接收传过来的值
<template><divclass="container"><Categorytitle="游戏"><templatev-slot="receiveValue"><ul><liv-for="(g,index)inreceiveValue.games":key="index">{{g}}</li></ul><a>{{receiveValue.msg}}</a></template></Category><Categorytitle="游戏"><templatev-slot="{games,msg}"><ol><liv-for="(g,index)ingames":key="index">{{g}}</li></ol><a>{{msg}}</a></template></Category><Categorytitle="游戏"><templatev-slot="{games,msg}"><h5v-for="(g,index)ingames":key="index">{{g}}</h5><a>{{msg}}</a></template></Category></div></template><script>importCategoryfrom"@/components/Category";exportdefault{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><templateslot="center"><div>html结构1</div></template><tenplatev-slot:footer><div>html结构2</div></template></Category>
子组件中：
<template><div><1--定义插槽--><slotname="center">插槽默认内容...</slot><slotname="footer”>插槽默认内容...</slot></div></template>
作用域插槽
1.理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定，(games 数据在 Category 组件中，但使用数据所遍历出来的结构由 App 组件决定)
2.具体编码：
父组件中：
<category><templatev-slot="scopeData"<!--生成的是ul列表--><ul><liv-for="ginscopeDsta.games":key="g">{g}</li></ul></template></Category><Category><templatev-slot={scopeData}><!--生成的是h5标题--><h5v-for="ginscopeData":key="g">{{g}}</h5></template></Category>
子组件中：
<template><div><slot:games="games"></slot></div></template><script>exportdefault{name:"Category',props:["title"],//数据在子组件自身data(){return{games:['红色警戒,穿越火线',"劲舞团",超级玛丽"]}}}</script>
注意：scope和slot-scope过时了，可以使用v-slot
以上就是关于“Vue中的插槽怎么使用”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注恰卡编程网行业资讯频道。
