Vue插槽最全最通俗的总结
1.匿名插槽----就是定义的时候不带name的插槽,使用的时候也不用带name
总结:
(1)一定要分清定义插槽和使用插槽格式。如上图A是在使用一个插槽的基础上再继续定义一个匿名插槽。
(2)匿名插槽的使用可以加template也可以不加,例如图B和图C,那三个元素有没有用template包裹都一样会生效,也就是都会放到左侧的插槽内。
(3)插槽是可以有默认值的,当上层没有覆盖的时候可以显示自己的东西。
例如:当我们如下图右这样定义的时候,就巧妙的应用了默认值处理,当上层重写dialog-footer的时候就覆盖,没有重写就使用当前的默认值两种(下图左右分别是两种不同的默认值处理方式,其本质都是为了判断到底是使用默认的还是使用上层重写的)。
2.具名插槽----就是定义的使用使用给name赋一个值,使用的时候在template中使用相同的值。
总结:
(1)此时必须使用template包裹,并且必须传一个相同的name值。
(2)我们习惯的slot="xxx"的写法其实是不规范的,见下图官方文档解释,所以建议大家以后都用<template v-slot:xxx></template> ---特别注意写法,不用等于,且不用双引号。
3.作用域插槽---用于传值
总结:
(1)底层可以传递多个值,因此业务层接受的时候是一个对象,里面包括了所有的要传递的属性。
(2)如果底层定义的时候不加name,也就是匿名插槽传值的时候,则接受方写不写default均可。如下
<slot :user="user" :number="number"></slot> <=> <template v-slot:="myData">/<template v-slot:default="myData">/<template v-slot="myData">(推荐)
(3)解构插槽(强推),就是在接受方使用结构赋值就是解构插槽,这种写法简洁、美观且上档次。
上图中的例子可以改写为:
当为具名插槽时 <template v-slot:center="{ user,number }"></template>
当为匿名插槽时 <template v-slot={ user,number }></template>
拓展:
Vue插槽最全最通俗的总结的更多相关文章
- 用Vue实现一个全选指令
最近用vue做了两个项目,都需要实现全选反选的功能,两个项目用了两种实现方法,第一个项目用vue的computed,第二个项目用指令来实现,用起来,发觉指令更加方便. 第一次做全选的时候是刚开始接触v ...
- koa+mysql+vue+socket.io全栈开发之数据访问篇
后端搭起大体的框架后,接着涉及到的就是如何将数据持久化的问题,也就是对数据库进行 CURD 操作. 关于数据库方案, mongodb 和 mysql 都使用过,但我选用的是 mysql,原因: 目前为 ...
- Vue插槽:(2.6.0以后版本弃用slot和slot-scope,改用v-slot)
关于Vue插槽的概念,大家可以从vue官网的api查看,我是看到网站的对于初接触 这个要概念的人来说不是很清楚,我来贴下原码,就比较直观了 贴下原码: 具名插槽:v-slot:header Html: ...
- Vue 插槽详解
Vue插槽,是学习vue中必不可少的一节,当初刚接触vue的时候,对这些掌握的一知半解,特别是作用域插槽一直没明白. 后面越来越发现插槽的好用. 分享一下插槽的一些知识吧. 分一下几点: 1.插槽内可 ...
- 谈谈Vue.js——vue-resource全攻略
本篇文章主要介绍了谈谈Vue.js——vue-resource全攻略,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 概述 上一篇我们介绍了如何将$.ajax和Vue. ...
- Vue插槽的另外一些特性
之前有个项目,想判断一下,某一个模板内的插槽是否被使用. 不知道是不是问题过于简单,网上没有这方面的说明.我就抽时间验证一下vue插槽相关的一些功能. 然后写下这篇随笔,希望对后来人能有一些帮助. 简 ...
- 学习笔记:Vue——插槽
关于Vue插槽,只用过最简单的语法,现在完整地走一遍官方文档说明,并且探索更多用法. 01.如果组件中没有包含一个<slot>元素,则该组件起始标签和结束标签之间的任何内容都会被抛弃. 0 ...
- 实习模块vue+java小型全栈开发(三)
实习模块vue+java小型全栈开发(三) --dx 背景 首先,先给自己一个答案:这篇博客我定义为(三),因为之前的两个模块页面,内容都是一样的,但是被改了几次需求,就一直拖着没有上传. 今天是真正 ...
- vue插槽用法(极客时间Vue视频笔记)
vue插槽 插槽是用来传递复杂的内容,类似方法 <!DOCTYPE html> <html lang="en"> <head> <meta ...
随机推荐
- 九、Django3的ASGI
九.Django3的ASGI 9.1.Web应用程序和web服务器 Web应用程序(Web)是一种能完成web业务逻辑,能让用户基于web浏览器访问的应用程序,它可以是一个实现http请求和响应功能的 ...
- 泛化之美 —— C++11 可变参数模板的妙用
概述 首先这篇文章出自博客园作者:[qicosmos ],我对本文的实例代码进行了学习.思考和整理纠正,理清了文章的全部细节,觉得这是一篇让我受益匪浅的文章.之所以会接触「可变参数模板」这部分的内容, ...
- 利用xtrabackup8完全,增量备份及还原MySQL8
利用xtrabackup8完全,增量备份及还原MySQL8 1.环境准备 服务器 作用 数据库版本 xtrabackup版本 10.0.0.8 数据备份 mysql8.0.26 8.0.28 10.0 ...
- GY91(MPU9250 + BMP280)惯性传感器开发指南
目录 参考资料 I2C 设备ID 关键数据读取 MPU6500:读取加速度数据&换算单位 BMP280: 读取温度和气压信息 & 单位换算 推荐库 参考资料 参考资料说明: 用户手册时 ...
- Pytest学习
pytest简介 pytest是python的一种单元测试框架,与python自带的unittest测试框架类似,但是比unittest框架使用起来更简洁,效率更高. 使用介绍 编写规则 测试函数以t ...
- chrome工具调试
项目调试的困境 程序开发总会遇到各种各样的问题,为什么实际结果和预期结果不一致? 这个时候如果能深入程序内部抽丝剥茧去一探究竟再好不过! 而chrome工具是前端开发的杀手锏,经常听到的一句话是: 出 ...
- Halcon使用MeasurePos来实现检测边缘点
(1)为了提高性能,测量句柄只需要初始化一次: 参数:测量矩形的中心点行坐标,测量矩形中心的列坐标,测量矩形的角度,测量矩形的宽,测量矩形的高,待处理图像的宽,待处理图像的高,使用的算法,输出测量句柄 ...
- Go语言核心36讲27
在前面的文章中,我们一起学习了Go程序测试的基础知识和基本测试手法.这主要包括了Go程序测试的基本规则和主要流程.testing.T类型和testing.B类型的常用方法.go test命令的基本使用 ...
- Datawhale组队学习_Task01:概览西瓜书+南瓜书第1、2章
第一章 绪论 1.1引言 打开书,五分钟后,合上书:嗯!学会了!如何判断一个好瓜 1.2基本术语 分类:对离散值进行预测的学习任务,是有监督学习的代表 回归:对连续值进行预测的学习任务,是有监督学习的 ...
- 24V转5V降压芯片,24V转3.3V的稳压芯片,中文规格书
一般说明PW2312 是一个高频,同步,整流,降压,开关模式转换器内部功率 MOSFET.它提供了一个非常紧凑的解决方案,以实现 1.5A 的峰值输出电流在广泛的输入电源范围内,具有优良的负载和线路调 ...