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