详解Vue slot插槽


Posted in Vue.js onNovember 20, 2021

1.作用:让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适用于父组件===>子组件(传的是HTML格式)。

父组件App:

详解Vue slot插槽

子组件Category:

详解Vue slot插槽

在父组件或者子组件里都可以给插槽中的内容设置样式,效果一样

作用域插槽:

1.理解:数据在组件的自身(Category),但根据数据生成的结构需要组件的使用者(APP)来决定。(games数据在Category组件中,但使用数据所遍历出来的结构由App组件决定)

子组件在给父组件传数据

子:

详解Vue slot插槽

父:

使用atguigu这样一个对象接收是因为可能传了多个值

详解Vue slot插槽

作用域插槽也可以有名字name

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注三水点靠木的更多内容!

Vue.js 相关文章推荐
vue中echarts的用法及与elementui-select的协同绑定操作
Nov 17 Vue.js
Vue 的 v-model用法实例
Nov 23 Vue.js
Vue组件生命周期运行原理解析
Nov 25 Vue.js
Vue Elenent实现表格相同数据列合并
Nov 30 Vue.js
如何在vue中使用kindeditor富文本编辑器
Dec 19 Vue.js
vue+element UI实现树形表格
Dec 29 Vue.js
详解实现vue的数据响应式原理
Jan 20 Vue.js
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 Vue.js
Vue3 Composition API的使用简介
Mar 29 Vue.js
vue实现简单数据双向绑定
Apr 28 Vue.js
关于Vue Router的10条高级技巧总结
May 06 Vue.js
Vue实现tab导航栏并支持左右滑动功能
Jun 28 Vue.js
详解Vue router路由
Nov 20 #Vue.js
vue中 this.$set的使用详解
如何用vue实现网页截图你知道吗
Vue3中的Refs和Ref详情
Nov 11 #Vue.js
详细聊聊vue中组件的props属性
一定要知道的 25 个 Vue 技巧
简单聊聊Vue中的计算属性和属性侦听
Oct 05 #Vue.js
You might like
德生9700DX电路分析
2021/03/02 无线电
很实用的一个完整email发送程序
2006/10/09 PHP
php限制文件下载速度的代码
2015/10/20 PHP
PHP CURL post数据报错 failed creating formpost data
2016/10/16 PHP
PHP 接入微信扫码支付总结(总结篇)
2016/11/03 PHP
PHP基于Redis消息队列实现发布微博的方法
2017/05/03 PHP
js获取单选框或复选框值及操作
2012/12/18 Javascript
通过javascript把图片转化为字符画
2013/10/24 Javascript
JavaScript/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)
2013/11/25 Javascript
JS按回车键实现登录的方法
2014/08/25 Javascript
30个经典的jQuery代码开发技巧
2014/12/15 Javascript
jquery中checkbox使用方法简单实例演示
2015/11/24 Javascript
利用百度地图API获取当前位置信息的实例
2017/11/06 Javascript
Vue条件循环判断+计算属性+绑定样式v-bind的实例
2018/09/18 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
2019/04/26 Javascript
python基于xml parse实现解析cdatasection数据
2014/09/30 Python
Python设计模式中单例模式的实现及在Tornado中的应用
2016/03/02 Python
Python2.7简单连接与操作MySQL的方法
2016/04/27 Python
Python线性回归实战分析
2018/02/01 Python
对numpy中数组元素的统一赋值实例
2018/04/04 Python
Numpy数据类型转换astype,dtype的方法
2018/06/09 Python
pycharm运行scrapy过程图解
2019/11/22 Python
python3中datetime库,time库以及pandas中的时间函数区别与详解
2020/04/16 Python
在Pycharm中安装Pandas库方法(简单易懂)
2021/02/20 Python
美国高街时尚品牌:OASAP
2016/07/24 全球购物
Weekendesk意大利:探索多种引人入胜的周末主题
2016/10/14 全球购物
影视动画专业个人的自我评价
2013/12/31 职场文书
岗位廉政承诺书
2014/03/27 职场文书
2014年村官工作总结
2014/11/24 职场文书
销售员岗位职责
2015/02/10 职场文书
2015年国庆节活动总结
2015/03/23 职场文书
党员发展大会主持词
2015/07/03 职场文书
结婚幸福感言
2015/08/01 职场文书
django注册用邮箱发送验证码的实现
2021/04/18 Python
Java循环队列与非循环队列的区别总结
2021/06/22 Java/Android
Python matplotlib绘制雷达图
2022/04/13 Python