-
Vue学习之--------插槽【默认插槽、具名插槽、作用域插槽】（2022/8/30）
插槽Vue.js官网介绍：https://vuejs.org/guide/components/slots.html
会牵涉到template的用法、占位、实际不渲染到页面中1、默认插槽：
1.1 基本结构及介绍
个人理解：在A组件中定义一个插槽（相当于一个占位符），在B组件中使用A组件，可以放入一些内容到A组件中，放置的位置就放到插槽中。将占位符的内容替换掉。（默认只有一个插槽的时候，直接放入这个插槽）1.2 用法
父组件中： <Category> <div>html结构1</div> </Category> 子组件中： <template> <div> <!-- 定义插槽 --> <slot>插槽默认内容...</slot> </div> </template>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
1.3 实际应用
1.3.1 项目结构
1.3.2 组件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; } video{ width: 100%; } img{ width: 100%; } </style>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
1.3.3 App.vue
<template> <div class="container"> <Category title="美食" > <img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt=""> </Category> <Category title="游戏" > <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"></video> </Category> </div> </template> <script> import Category from './components/Category' export default { name:'App', components:{Category}, data() { return { foods:['火锅','烧烤','小龙虾','牛排'], games:['红色警戒','穿越火线','劲舞团','超级玛丽'], films:['《教父》','《拆弹专家》','《你好，李焕英》','《尚硅谷》'] } }, } </script> <style scoped> .container{ display: flex; justify-content: space-around; } </style>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
2、具名插槽：
2.1 基本结构及介绍
个人理解：当A组件中有多个插槽时，B组件中使用A组件，同时需要向A组件塞内容。应该塞到哪个插槽？？？ 所以给插槽命名，可以指定内容塞到哪个插槽中。2.1 用法
父组件中： <Category> <template slot="center"> <div>html结构1</div> </template> <template v-slot:footer> <div>html结构2</div> </template> </Category> 子组件中： <template> <div> <!-- 定义插槽 --> <slot name="center">插槽默认内容...</slot> <slot name="footer">插槽默认内容...</slot> </div> </template>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
2.3 实际应用
2.3.1 项目结构
同1.3.1
2.3.2 组件Category.vue
<template> <div class="category"> <h3>{{title}}分类</h3> <!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） --> <slot name="center">我是一些默认值，当使用者没有传递具体结构时，我会出现1</slot> <slot name="footer">我是一些默认值，当使用者没有传递具体结构时，我会出现2</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; } video{ width: 100%; } img{ width: 100%; } </style>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
2.3.1 App.vue
<template> <div class="container"> <Category title="美食" > <img slot="center" src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt=""> <a slot="footer" href="http://www.atguigu.com">更多美食</a> </Category> <Category title="游戏" > <ul slot="center"> <li v-for="(g,index) in games" :key="index">{{g}}</li> </ul> <div class="foot" slot="footer"> <a href="http://www.atguigu.com">单机游戏</a> <a href="http://www.atguigu.com">网络游戏</a> </div> </Category> <Category title="电影"> <video slot="center" controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video> <template v-slot:footer> <div class="foot"> <a href="http://www.atguigu.com">经典</a> <a href="http://www.atguigu.com">热门</a> <a href="http://www.atguigu.com">推荐</a> </div> <h4>欢迎前来观影</h4> </template> </Category> </div> </template> <script> import Category from './components/Category' export default { name:'App', components:{Category}, data() { return { foods:['火锅','烧烤','小龙虾','牛排'], games:['红色警戒','穿越火线','劲舞团','超级玛丽'], films:['《教父》','《拆弹专家》','《你好，李焕英》','《尚硅谷》'] } }, } </script> <style scoped> .container,.foot{ display: flex; justify-content: space-around; } h4{ text-align: center; } </style>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
3、作用域插槽：
3.1 基本结构及介绍
个人理解：当数据在A组件、插槽定义在A组件中。B组件则无法直接访问A组件中的信息，但是当B组件使用A组件的插槽时，A组件主动将数据交给B组件使用。-
- 理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）
3.2用法
父组件中： <Category> <template scope="scopeData"> <!-- 生成的是ul列表 --> <ul> <li v-for="g in scopeData.games" :key="g">{{g}}</li> </ul> </template> </Category> <Category> <template slot-scope="scopeData"> <!-- 生成的是h4标题 --> <h4 v-for="g in scopeData.games" :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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
3.3 实际应用
3.3.1 项目结构
同1.3.1
3.3.2 组件Category.vue
<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:['红色警戒','穿越火线','劲舞团','超级玛丽'], } }, } </script> <style scoped> .category{ background-color: skyblue; width: 200px; height: 300px; } h3{ text-align: center; background-color: orange; } video{ width: 100%; } img{ width: 100%; } </style>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
3.3.3 App.vue
<template> <div class="container"> <Category title="游戏"> <template scope="atguigu"> <ul> <li v-for="(g,index) in atguigu.games" :key="index">{{g}}</li> </ul> </template> </Category> <Category title="游戏"> <template scope="{games}"> <ol> <li style="color:red" v-for="(g,index) in games" :key="index">{{g}}</li> </ol> </template> </Category> <Category title="游戏"> <template slot-scope="{games}"> <h4 v-for="(g,index) in games" :key="index">{{g}}</h4> </template> </Category> </div> </template> <script> import Category from './components/Category' export default { name:'App', components:{Category}, } </script> <style scoped> .container,.foot{ display: flex; justify-content: space-around; } h4{ text-align: center; } </style>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
-
相关阅读:
hive基于新浪微博的日志数据分析——项目及源码
AtCoder_abc267_c
题记(43)--C翻转(矩阵旋转)
《深度学习入门：基于Python的理论和实现》再读笔记4
Mysql8 创建表，按年/月或其他条件进行分区存储
【洛谷 P2678】[NOIP2015 提高组] 跳石头 题解（二分答案+循环）
启动微服务，提示驱动程序无法通过使用安全套接字层(SSL)加密与 SQL Server 建立安全连接
[附源码]Python计算机毕业设计 楼盘销售管理系统
硬技能之上的软技巧（三）
操作DAC模块
- 原文地址：https://blog.csdn.net/weixin_43304253/article/details/126614868