详解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中通过render函数给子组件设置ref操作
Nov 17 Vue.js
vue实现简易的双向数据绑定
Dec 29 Vue.js
vue编写简单的购物车功能
Jan 08 Vue.js
vue-resource 拦截器interceptors使用详解
Jan 18 Vue.js
详解实现vue的数据响应式原理
Jan 20 Vue.js
使用vue3重构拼图游戏的实现示例
Jan 25 Vue.js
开发一个封装iframe的vue组件
Mar 29 Vue.js
vue中三级导航的菜单权限控制
Mar 31 Vue.js
Vue图片裁剪组件实例代码
Jul 02 Vue.js
vue3获取当前路由地址
Feb 18 Vue.js
Vue h函数的使用详解
Feb 18 Vue.js
vue中this.$http.post()跨域和请求参数丢失的解决
Apr 08 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
php导出生成word的方法
2015/12/25 PHP
php获取'/'传参的值简单方法
2017/07/13 PHP
基于PHP实现短信验证码发送次数限制
2020/07/11 PHP
javascript 跨浏览器开发经验总结(五) js 事件
2010/05/19 Javascript
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
2010/09/19 Javascript
javascript常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异
2010/12/25 Javascript
JS+CSS实现自适应选项卡宽度的圆角滑动门效果
2015/09/15 Javascript
JavaScript时间戳与时间日期间相互转换
2017/12/11 Javascript
详解在vue-cli中使用graphql即vue-apollo的用法
2018/09/08 Javascript
JS 数组随机洗牌的实例代码
2018/09/12 Javascript
Node.js assert断言原理与用法分析
2019/01/04 Javascript
vue-cli中vue本地实现跨域调试接口
2019/01/16 Javascript
node(koa2) web应用模块介绍详解
2019/03/29 Javascript
JavaScript使用localStorage存储数据
2019/09/25 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
2020/10/27 Javascript
[48:54]VGJ.T vs infamous Supermajor小组赛D组败者组第一轮 BO3 第二场 6.3
2018/06/04 DOTA
Python中的迭代器漫谈
2015/02/03 Python
Django中实现点击图片链接强制直接下载的方法
2015/05/14 Python
Python迭代和迭代器详解
2016/11/10 Python
浅谈Python中range和xrange的区别
2017/12/20 Python
Python pycharm 同时加载多个项目的方法
2019/01/17 Python
python调用支付宝支付接口流程
2019/08/15 Python
python 利用jinja2模板生成html代码实例
2019/10/10 Python
python爬虫beautifulsoup解析html方法
2020/12/07 Python
CSS3 真的会替代 SCSS 吗
2021/03/09 HTML / CSS
编写html5时调试发现脚本php等网页js、css等失效
2013/12/31 HTML / CSS
微信小程序canvas实现水平、垂直居中效果
2020/02/05 HTML / CSS
杭州-飞时达软件有限公司.net笔面试
2012/04/28 面试题
管理心得体会
2013/12/28 职场文书
啦啦队口号大全
2014/06/16 职场文书
2014年教育实习工作总结
2014/11/22 职场文书
邮政营业员岗位职责
2015/04/14 职场文书
寻衅滋事罪辩护词
2015/05/21 职场文书
2016十一国庆节感言
2015/12/09 职场文书
nginx+lua单机上万并发的实现
2021/05/31 Servers
开发微信小程序之WXSS样式教程
2022/04/18 HTML / CSS