详解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 18 Vue.js
vue使用echarts图表自适应的几种解决方案
Dec 04 Vue.js
vue使用exif获取图片经纬度的示例代码
Dec 11 Vue.js
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
详解为什么Vue中的v-if和v-for不建议一起用
Jan 13 Vue.js
vue实现可移动的悬浮按钮
Mar 04 Vue.js
vue打开新窗口并实现传参的图文实例
Mar 04 Vue.js
Vue vee-validate插件的简单使用
Jun 22 Vue.js
Vue h函数的使用详解
Feb 18 Vue.js
Vue.js中v-for指令的用法介绍
Mar 13 Vue.js
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
Apr 30 Vue.js
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 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中两种缩放图片的函数,为图片添加水印
2013/06/14 PHP
用PHP和Shell写Hadoop的MapReduce程序
2014/04/15 PHP
php+ajax登录跳转登录实现思路
2016/07/31 PHP
JS 巧妙获取剪贴板数据 Excel数据的粘贴
2009/07/09 Javascript
js 编写规范
2010/03/03 Javascript
JavaScript中yield实用简洁实现方式
2010/06/12 Javascript
两种方法实现文本框输入内容提示消失
2013/03/17 Javascript
jQuery 浮动导航菜单适合购物商品类型的网站
2014/09/09 Javascript
JavaScript页面模板库handlebars的简单用法
2015/03/02 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
2015/06/23 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
2016/01/04 Javascript
Js类的静态方法与实例方法区分及jQuery拓展的两种方法
2016/06/03 Javascript
js基础之DOM中document对象的常用属性方法详解
2016/10/28 Javascript
使用Angular缓存父页面数据的方法
2017/01/03 Javascript
jQuery动态移除和添加背景图片的方法详解
2017/03/07 Javascript
Vue 进阶教程之v-model详解
2017/05/06 Javascript
基于vue2实现左滑删除功能
2017/11/28 Javascript
nodejs实现截取上传视频中一帧作为预览图片
2017/12/10 NodeJs
JavaScript实现的超简单计算器功能示例
2017/12/23 Javascript
JavaScript中的回调函数实例讲解
2019/01/27 Javascript
JS实现“全选”和"全不选"功能代码实例
2020/02/06 Javascript
Node.js中文件系统fs模块的使用及常用接口
2020/03/06 Javascript
基于element-ui封装表单金额输入框的方法示例
2021/01/06 Javascript
[01:13]2014DOTA2西雅图邀请赛 舌尖上的TI4
2014/07/08 DOTA
Python实现动态添加类的属性或成员函数的解决方法
2014/07/16 Python
Python http接口自动化测试框架实现方法示例
2018/12/06 Python
pytorch下使用LSTM神经网络写诗实例
2020/01/14 Python
利用css3制作3D样式按钮实现代码
2013/03/18 HTML / CSS
Canvas 像素处理之改变透明度的实现代码
2019/01/08 HTML / CSS
德国街头和运动文化高品质商店:BSTN Store
2017/08/26 全球购物
会计核算科岗位职责
2014/03/19 职场文书
师范毕业生求职信
2014/07/11 职场文书
在职证明格式样本
2015/06/15 职场文书
2019通用版劳动合同范本!
2019/07/11 职场文书
如何理解Vue简单状态管理之store模式
2021/05/15 Vue.js
TV动画《神废柴☆偶像》公布先导PV
2022/03/20 日漫