详解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实现下载文件流完整前后端代码
Nov 17 Vue.js
vue 获取到数据但却渲染不到页面上的解决方法
Nov 19 Vue.js
Vue中强制组件重新渲染的正确方法
Jan 03 Vue.js
Vue项目中使用mock.js的完整步骤
Jan 12 Vue.js
Vue实现圆环进度条的示例
Feb 06 Vue.js
vue如何使用rem适配
Feb 06 Vue.js
Vue包大小优化的实现(从1.72M到94K)
Feb 18 Vue.js
vue脚手架项目创建步骤详解
Mar 02 Vue.js
详解Vue的options
May 15 Vue.js
Vue Element-ui表单校验规则实现
Jul 09 Vue.js
Vue.js中v-bind指令的用法介绍
Mar 13 Vue.js
VUE使用draggable实现组件拖拽
Apr 06 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 自写函数代码 获取关键字 去超链接
2010/02/08 PHP
如何用phpmyadmin设置mysql数据库用户的权限
2012/01/09 PHP
PHP调用MsSQL Server 2012存储过程获取多结果集(包含output参数)的详解
2013/07/03 PHP
php检测文件编码的方法示例
2014/04/25 PHP
php生成curl命令行的方法
2015/12/14 PHP
用js计算页面执行时间的函数
2006/12/07 Javascript
Javascript优化技巧(文件瘦身篇)
2008/01/28 Javascript
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
2010/06/19 Javascript
js 动态加载事件的几种方法总结
2013/12/25 Javascript
JavaScript中的变量定义与储存介绍
2014/12/31 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
2015/06/12 Javascript
JS+CSS实现下拉列表框美化效果(3款)
2015/08/15 Javascript
jquery实现未经美化的简洁TAB菜单效果
2015/08/28 Javascript
jQuery获取checkbox选中的值
2016/01/28 Javascript
BootStrap中按钮点击后被禁用按钮的最佳实现方法
2016/09/23 Javascript
JavaScript中关于iframe滚动条的去除和保留
2016/11/17 Javascript
Angular中实现树形结构视图实例代码
2017/05/05 Javascript
微信小程序实时聊天WebSocket
2018/07/05 Javascript
移动端如何用下拉刷新的方式实现上拉加载
2018/12/10 Javascript
如何使用VuePress搭建一个类型element ui文档
2019/02/14 Javascript
vue设计一个倒计时秒杀的组件详解
2019/04/06 Javascript
Layui 动态禁止select下拉的例子
2019/09/03 Javascript
如何通过Proxy实现JSBridge模块化封装
2020/10/22 Javascript
python遍历文件夹并删除特定格式文件的示例
2014/03/05 Python
MySQLdb ImportError: libmysqlclient.so.18解决方法
2014/08/21 Python
对numpy中的transpose和swapaxes函数详解
2018/08/02 Python
Python3实现获取图片文字里中文的方法分析
2018/12/13 Python
pandas 空数据处理方法详解
2019/11/02 Python
python3实现单目标粒子群算法
2019/11/14 Python
Python TCPServer 多线程多客户端通信的实现
2019/12/31 Python
Django模板获取field的verbose_name实例
2020/05/19 Python
Selenium Webdriver元素定位的八种常用方式(小结)
2021/01/13 Python
美国知名的女性服饰品牌:LOFT(洛芙特)
2016/08/05 全球购物
新闻专业推荐信范文
2013/11/20 职场文书
咖啡厅商业计划书
2014/09/15 职场文书
解决SpringBoot文件上传临时目录找不到的问题
2021/07/01 Java/Android