Vue 中插槽的使用总结
默认插槽
首先做一个页面:
新增 Category.vue
<template> <div class="category"> <h3>{{title}}分类</h3> <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; } h3{ 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"> <h3>{{title}}分类</h3> <slot></slot> </div> </template> <script> export default { name: "Category", props:["title"] } </script> <style scoped> .category{ background-color: skyblue; width: 200px; height: 300px; } h3{ 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"> <h3>{{title}}分类</h3> <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; } h3{ 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"> <h3>{{ title }}分类</h3> <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; } h3 { 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}"> <h4 v-for="(g,index) in games" :key="index">{{ g }}</h4> <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}> <!--生成的是h4标题--> <h4 v-for="g in scopeData" :key="g">{{g}}</h4> </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 中插槽的使用总结的文章就介绍到这了,更多相关Vue 插槽使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
vue-resource post数据时碰到Django csrf问题的解决
这篇文章主要介绍了vue-resource post数据时碰到Django csrf问题的解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-03-03vue使用Vue.extend方法仿写个loading加载中效果实例
在vue中提供v-loading命令,用于div的loading加载,下面这篇文章主要给大家介绍了关于vue使用Vue.extend方法仿写个loading加载中效果的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-06-06
最新评论