详解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使用vant中的checkbox实现全选功能
Nov 17 Vue.js
Vue项目如何引入bootstrap、elementUI、echarts
Nov 26 Vue.js
vue中封装axios并实现api接口的统一管理
Dec 25 Vue.js
Vue项目中使用mock.js的完整步骤
Jan 12 Vue.js
vue-router懒加载的3种方式汇总
Feb 28 Vue.js
vue3.0 项目搭建和使用流程
Mar 04 Vue.js
vue使用节流函数的踩坑实例指南
May 20 Vue.js
vue实现锚点定位功能
Jun 29 Vue.js
详解Vue slot插槽
Nov 20 Vue.js
vue中使用mockjs配置和使用方式
Apr 06 Vue.js
VUE解决跨域问题Access to XMLHttpRequest at
May 06 Vue.js
vue @ ~ 相对路径 路径别名设置方式
Jun 05 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中使用explode查找某个字符是否存在的方法
2011/07/12 PHP
php笔记之:AOP的应用
2013/04/24 PHP
mac环境中使用brew安装php5.5.15
2014/08/18 PHP
php中照片旋转 (orientation) 问题的正确处理
2017/02/16 PHP
PHP解决中文乱码
2017/04/28 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
PHP中检查isset()和!empty()函数的必要性
2019/02/13 PHP
JS与框架页的操作代码
2010/01/17 Javascript
jQuery操作元素css样式的三种方法
2014/06/04 Javascript
BootStrap实现手机端轮播图左右滑动事件
2016/10/13 Javascript
浅谈nodejs中的类定义和继承的套路
2017/07/26 NodeJs
JavaScript的词法结构精华篇
2018/10/17 Javascript
javascript+css实现进度条效果
2020/03/25 Javascript
[45:50]完美世界DOTA2联赛PWL S3 CPG vs Forest 第二场 12.16
2020/12/17 DOTA
Python的函数的一些高阶特性
2015/04/27 Python
浅谈Python中chr、unichr、ord字符函数之间的对比
2016/06/16 Python
Python通过RabbitMQ服务器实现交换机功能的实例教程
2016/06/29 Python
Python中shutil模块的常用文件操作函数用法示例
2016/07/05 Python
Python中的上下文管理器相关知识详解
2019/09/19 Python
Python根据服务获取端口号的方法
2019/09/25 Python
Python日期格式和字符串格式相互转换的方法
2020/02/18 Python
Django获取model中的字段名和字段的verbose_name方式
2020/05/19 Python
Manjaro、pip、conda更换国内源的方法
2020/11/17 Python
Python tkinter之ComboBox(下拉框)的使用简介
2021/02/05 Python
Html5画布_动力节点Java学院整理
2017/07/13 HTML / CSS
前端canvas水印快速制作(附完整代码)
2019/09/19 HTML / CSS
使用canvas绘制超炫时钟
2014/12/17 HTML / CSS
中国综合网上购物商城:苏宁易购
2016/08/09 全球购物
YII2 全局异常处理深入讲解
2021/03/24 PHP
公司财务工作总结的自我评价
2013/11/23 职场文书
个人总结与自我评价
2014/09/18 职场文书
报到证办理个人委托书
2014/10/06 职场文书
简单的辞职信范文(2016最新版)
2015/05/12 职场文书
小学家庭教育心得体会
2016/01/14 职场文书
Vue项目打包、合并及压缩优化网页响应速度
2021/07/07 Vue.js