详解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如何跨组件传递Slot的实现
Dec 14 Vue.js
详解Vue的异步更新实现原理
Dec 22 Vue.js
vue实现树状表格效果
Dec 29 Vue.js
vue实现防抖的实例代码
Jan 11 Vue.js
vue实现按钮切换图片
Jan 20 Vue.js
Vue实现简单计算器
Jan 20 Vue.js
解决vue项目本地启动时无法携带cookie的问题
Feb 06 Vue.js
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 Vue.js
详解Vue中$props、$attrs和$listeners的使用方法
Feb 18 Vue.js
vue生命周期钩子函数以及触发时机
Apr 26 Vue.js
Vue Mint UI mt-swipe的使用方式
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排序二叉树基本功能实现方法示例
2018/05/26 PHP
PHP中strtr与str_replace函数运行性能简单测试示例
2019/06/22 PHP
表单的一些基本用法与技巧
2006/07/15 Javascript
JavaScript脚本语言在网页中的简单应用
2007/05/13 Javascript
Code: write(s,d) 输出连续字符串
2007/08/19 Javascript
JS启动应用程序的一个简单例子
2008/05/11 Javascript
javaScript parseInt字符转化为数字函数使用小结
2009/11/05 Javascript
Google排名中的10个最著名的 JavaScript库
2010/04/27 Javascript
javascript工具库代码
2012/03/29 Javascript
浅谈JavaScript之事件绑定
2013/07/08 Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
2015/09/14 Javascript
js获取隐藏元素宽高的实现方法
2016/05/19 Javascript
详解BootStrap中Affix控件的使用及保持布局的美观的方法
2016/07/08 Javascript
Bootstrap实现弹性搜索框
2016/07/11 Javascript
老生常谈JavaScript 函数表达式
2016/09/01 Javascript
手机端实现Bootstrap简单图片轮播效果
2016/10/13 Javascript
JS中如何实现Laravel的route函数详解
2017/02/12 Javascript
Vue 父子组件、组件间通信
2017/03/08 Javascript
作为老司机使用 React 总结的 11 个经验教训
2017/04/08 Javascript
快速使用node.js进行web开发详解
2017/04/26 Javascript
webpack多入口文件页面打包配置详解
2018/01/09 Javascript
如何在vue中使用ts的示例代码
2018/02/28 Javascript
layui复选框的全选与取消实现方法
2019/09/02 Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
2020/02/03 Javascript
jquery轮播图插件使用方法详解
2020/07/31 jQuery
[01:06]DOTA2小知识课堂 Ep.01 TP出门不要忘记帮队友灌瓶哦
2019/12/05 DOTA
探索Python3.4中新引入的asyncio模块
2015/04/08 Python
python多进程使用及线程池的使用方法代码详解
2018/10/24 Python
使用pyqt 实现重复打开多个相同界面
2019/12/13 Python
在Pytorch中使用Mask R-CNN进行实例分割操作
2020/06/24 Python
Python pymsql模块的使用
2020/09/07 Python
初中同学聚会感言
2014/02/11 职场文书
房展策划方案
2014/06/07 职场文书
五好文明家庭事迹材料
2014/12/20 职场文书
自愿离婚协议书范本
2015/01/26 职场文书
《富饶的西沙群岛》教学反思
2016/02/16 职场文书