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.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.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>
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>
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>
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>
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>
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>
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>
Vue学习之--------插槽【默认插槽、具名插槽、作用域插槽】(2022/8/30)相关推荐
- 【vue3】 使用JSX实现普通、具名和作用域插槽
最近在vue3构建的项目中使用到了JSX(不得不说JSX用起来的感觉就是清爽).但是前段时间遇到了一个问题,vue template中的slot插槽如何在JSX中实现呢?查了很久资料.文档都很难找到一 ...
- [vue] slot插槽 默认插槽,具名插槽,作用域插槽
文章目录 插槽 不使用插槽 效果 分析 默认插槽 效果 分析 具名插槽 效果 分析 作用域插槽 效果 分析 再次理解作用域插槽 代码: 默认插槽: 具名插槽 作用域插槽 插槽 作用:让父组件可以向子组 ...
- vue基础 —— 单网页版的Vue学习 基础
文章目录 1.vue-cli 1.1.什么是vue-cli 1.2.vue-cli 安装 2..vue 项目结构和运行 2.1.vue 项目目录结构 2.2.vue 项目的运行流程 2.3.运行命令 ...
- Vue学习(slot、axios)-学习笔记
文章目录 Vue学习(slot.axios)-学习笔记 slot 插槽 axios 交互 Vue学习(slot.axios)-学习笔记 slot 插槽 父: <template> < ...
- 基于哔哩哔哩王红元(coderwhy)老师Vue学习课程的超详细学习笔记以及代码示例
开发工具:webstrom / VSCode 开发环境安装与配置:https://blog.csdn.net/qq_44068659/article/details/120293883 笔记: 定义变 ...
- Vue学习笔记02 = 组件化
目录 一.组件化基本概念 什么是组件化?组件化有什么作用? 人面对复杂问题的处理方式: 组件化也是类似的思想: Vue组件化思想: 组件化思想的应用: 二.组件的基本使用: 2.1.创建组件的构造器. ...
- Vue学习之--------插槽【默认插槽、具名插槽、作用域插槽】
插槽Vue.js官网介绍:https://vuejs.org/guide/components/slots.html 会牵涉到template的用法.占位.实际不渲染到页面中 1.默认插槽: 1.1 ...
- Vue默认插槽、具名插槽、作用域插槽及使用作用域插槽删除列表项
Vue默认插槽.具名插槽.作用域插槽及使用作用域插槽删除列表项 1. 默认插槽 父组件标签内写的所有内容都放在插槽中 父组件: <h1>我是父组件</h1><base-b ...
- Vue —— 进阶插槽(slot)(默认插槽、具名插槽和作用域插槽)
Vue全家桶 系列文章目录 内容 参考链接 Vue2.x - 基础 Vue2.x - 基础 Vue2.x - 进阶(零) 初始化脚手架 Vue2.x - 进阶(一) refs属性.props配置项 V ...
最新文章
- winform 界面设计
- decisiontreeregressor_机器学习算法-Decision Tree
- redhat搭建NIS服务器
- RocketMQ类关系图之NameServer
- Python-第一个Python程序
- php自动生成mysql的触发代码。
- 怎么在mysql中打开表存信息,我应该如何存储用户的“收藏夹”在mySQL表?
- CS231n课程笔记5.4:超参数的选择交叉验证
- qq编辑资料html,腾讯限置qq日记代码HTML在线编辑器: http://www.wyzxsx.com/editor.asp
- 编写GO的WEB开发框架 (十三): 配置文件读取
- 页面自适应纯CSS,使用rem单位
- 哈理工c语言,哈理工C语言试题.doc
- 测试时的一些技巧及面试官的一些期望回答
- java 调用阿里云中通快递查询示例
- multi-key map passed in for ordered parameter sort
- Ubuntu 设置合上笔记本盖子休眠的方法
- 我们可以用TeamViewer免费版做什么?
- 仿京东天猫商品详情页
- 还在手动部署 Kubernetes 集群吗,是时候使用 Kubespray 完成自动化部署了!
- LabVIEW控制Arduino驱动数码管(基础篇—11)