详解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-router中hash模式与history模式的区别详解
Dec 15 Vue.js
vue 导航守卫和axios拦截器有哪些区别
Dec 19 Vue.js
Vue仿百度搜索功能
Dec 28 Vue.js
vue+vant 上传图片需要注意的地方
Jan 03 Vue.js
vue backtop组件的实现完整代码
Apr 07 Vue.js
详解Vue的options
May 15 Vue.js
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
May 18 Vue.js
springboot+VUE实现登录注册
May 27 Vue.js
vite+vue3.0+ts+element-plus快速搭建项目的实现
Jun 24 Vue.js
Vue鼠标滚轮滚动切换路由效果的实现方法
Aug 04 Vue.js
vue3种table表格选项个数的控制方法
Apr 14 Vue.js
Vue2项目中对百度地图的封装使用详解
Jun 16 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
杏林同学录(八)
2006/10/09 PHP
PHP采用XML-RPC构造Web Service实例教程
2014/07/16 PHP
php对接java现实加签验签的实例
2016/11/25 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
jQuery 源码分析笔记(5) jQuery.support
2011/06/19 Javascript
解决jquery中美元符号命名冲突问题
2014/01/08 Javascript
js jquery ajax的几种用法总结(及优缺点介绍)
2014/01/28 Javascript
js动态创建上传表单通过iframe模拟Ajax实现无刷新
2014/02/20 Javascript
Node.js文件操作详解
2014/08/16 Javascript
Jqgrid之强大的表格插件应用
2015/12/02 Javascript
javascript 判断是否是微信浏览器的方法
2016/10/09 Javascript
jQuery时间验证和转换为标准格式的时间格式
2017/03/06 Javascript
Extjs表单输入框异步校验的插件实现方法
2017/03/20 Javascript
详解vue express启动数据服务
2017/07/05 Javascript
解决Vue编译时写在style中的路径问题
2017/09/21 Javascript
node.js 用socket实现聊天的示例代码
2017/10/17 Javascript
在vue中实现简单页面逆传值的方法
2017/11/27 Javascript
微信小程序实现animation动画
2018/01/26 Javascript
React SSR样式及SEO的实践
2018/10/22 Javascript
微信小程序使用二次贝塞尔曲线画波浪
2018/12/25 Javascript
如何阻止小程序遮罩层下方图层滚动
2019/09/05 Javascript
卸载vue2.0并升级vue_cli3.0的实例讲解
2020/02/16 Javascript
[02:43]2014DOTA2国际邀请赛 官方Alliance战队纪录片
2014/07/14 DOTA
Python环境下安装使用异步任务队列包Celery的基础教程
2016/05/07 Python
python GUI实例学习
2017/11/21 Python
Python cookbook(数据结构与算法)字典相关计算问题示例
2018/02/18 Python
pycharm编写spark程序,导入pyspark包的3中实现方法
2019/08/02 Python
Python  word实现读取及导出代码解析
2020/07/09 Python
面向新手解析python Beautiful Soup基本用法
2020/07/11 Python
初中校园广播稿
2014/02/02 职场文书
2014年党务公开实施方案
2014/02/27 职场文书
电大毕业生自我鉴定
2014/04/10 职场文书
财务出纳岗位职责
2015/03/31 职场文书
《女娲补天》教学反思
2016/02/20 职场文书
最新农村养殖致富:资金投入较低的创业项目有哪些?
2019/09/26 职场文书
Java图书管理系统,课程设计必用(源码+文档)
2021/06/30 Java/Android