详解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下载后台传过来的乱码流的问题
Dec 05 Vue.js
基于vue与element实现创建试卷相关功能(实例代码)
Dec 07 Vue.js
Vue 修改网站图标的方法
Dec 31 Vue.js
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
Jan 13 Vue.js
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 Vue.js
vue3 watch和watchEffect的使用以及有哪些区别
Jan 26 Vue.js
vue3.0中使用element的完整步骤
Mar 04 Vue.js
vue项目实现分页效果
Mar 24 Vue.js
Vue监视数据的原理详解
Feb 24 Vue.js
vue使用echarts实现折线图
Mar 21 Vue.js
Axios代理配置及封装响应拦截处理方式
Apr 07 Vue.js
vue项目打包后路由错误的解决方法
Apr 13 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
通过table标签,PHP输出EXCEL的实现方法
2013/07/24 PHP
CI使用Tank Auth转移数据库导致密码用户错误的解决办法
2014/06/12 PHP
两千行代码的PHP学习笔记汇总
2014/10/05 PHP
php实现字符串翻转的方法
2015/03/27 PHP
比较完整的微信开发php代码
2016/08/02 PHP
golang、python、php、c++、c、java、Nodejs性能对比
2017/03/12 NodeJs
PHP检查文件是否存在,不存在自动创建及读取文件内容操作示例
2020/01/23 PHP
getElementById在任意一款浏览器中都可以用吗的疑问回复
2007/05/13 Javascript
JavaScript更改class和id的方法
2008/10/10 Javascript
Mootools 1.2教程 同时进行多个形变动画
2009/09/15 Javascript
原生Js实现按的数据源均分时间点幻灯片效果(已封装)
2010/12/28 Javascript
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
2013/05/07 Javascript
60行js代码实现俄罗斯方块
2015/03/31 Javascript
Web开发必知Javascript技巧大全
2016/02/23 Javascript
jquery插件autocomplete用法示例
2016/07/01 Javascript
JS原生带缩略图的图片切换效果
2018/10/10 Javascript
vue element动态渲染、移除表单并添加验证的实现
2019/01/16 Javascript
node.js微信小程序配置消息推送的实现
2019/02/13 Javascript
jQuery实现的分页插件完整示例
2020/05/26 jQuery
[03:23]我的刀塔你不可能这么可爱 第一期金萌萌的故事
2014/06/20 DOTA
[03:49]DOTA2 2015国际邀请赛中国区预选赛第二日现场百态
2015/05/27 DOTA
Python匹配中文的正则表达式
2016/05/11 Python
python Pandas 读取txt表格的实例
2018/04/29 Python
Python实现的逻辑回归算法示例【附测试csv文件下载】
2018/12/28 Python
基于MSELoss()与CrossEntropyLoss()的区别详解
2020/01/02 Python
Python实现括号匹配方法详解
2020/02/10 Python
python数据预处理 :样本分布不均的解决(过采样和欠采样)
2020/02/29 Python
丹尼尔惠灵顿手表天猫官方旗舰店:Daniel Wellington
2017/08/25 全球购物
大学生实习感言
2014/01/16 职场文书
物资采购方案
2014/06/12 职场文书
群众路线自我剖析及整改措施
2014/11/04 职场文书
药品销售内勤岗位职责
2015/04/13 职场文书
2016党员干部廉政准则学习心得体会
2016/01/20 职场文书
会计专业自荐信范文
2019/05/22 职场文书
浅谈spring boot使用thymeleaf版本的问题
2021/08/04 Java/Android
「女孩的钓鱼慢活」全新版权绘公布
2022/03/21 日漫