Vue系列之插槽(slot)详解
文章の目录
- 1、什么是插槽了
- 2、插槽的分类
- 3、默认插槽的使用
- 3.1、语法
- 3.2、示例
- 4、具名插槽的使用
- 4.1、什么是具名插槽
- 4.2、语法
- 4.3、示例
- 4.4、缩写
- 5、作用域插槽的使用
- 5.1、什么是作用域插槽了
- 5.2、语法
- 5.3、示例
- 6、动态插槽名
- 6.1、什么是动态插槽名
- 6.2、示例
- 写在最后
Vue 版本:2.6.11,过期的API就不在这里进行赘述了。
1、什么是插槽了
插槽(Slot)是 Vue 提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性。插槽显不显示、怎样显示是由父组件来控制的,而插槽在哪里显示就由子组件来进行控制
2、插槽的分类
插槽有三种:默认插槽、具名插槽、作用域插槽。
3、默认插槽的使用
3.1、语法
<slot></slot>
3.2、示例
在子组件中定义了一个默认插槽:
<template><div class="about"><h1>This is an Children page</h1><!-- 定义一个默认插槽 --><slot></slot></div>
</template>
在开发中我们经常使用到组件之间的传值,但很多情况涉及到的都是数据属性的传值,现在如果是这种情况:
<template><div class="about"><h1>This is an Parent page</h1><children><!-- 一个p标签的dom结构 --><p>子组件标签之间</p></children></div>
</template><script>
import Children from './Children.vue'
export default {components: {Children},data () {return {}}
}
</script>
如果子组件中没有使用插槽的情况下:
<template><div class="about"><h1>This is an Children page</h1></div>
</template>
浏览器中的页面,父组件中的p标签的内容是不会还给子组件的。
这时候,想让父组件定义的p标签传给子组件并显示,可以在子组件中定义一个默认插槽
<template><div class="about"><h1>This is an Children page</h1><!-- 定义一个默认插槽 --><slot></slot></div>
</template>
在子组件中,你可以定义多个默认插槽,并在子组件中决定这些默认插槽的位置,父组件要插入的内容,都会被填充到这些默认的插槽中:
<template><div class="about"><h1>This is an Children page</h1><!-- 定义一个默认插槽 --><slot></slot><slot></slot></div>
</template>
当然,父组件定义要插入到子组件插槽的内容,并不一定是dom结构类型,也可以是一个组件,也可以是普通的数据结构,只要子组件有定义插槽,就会把内容填充进去。
4、具名插槽的使用
4.1、什么是具名插槽
其实就是在子组件中定义插槽时,给对应的插槽分别起个名字,方便后边插入父组件将根据name来填充对应的内容。
4.2、语法
<slot name="名称"></slot>
4.3、示例
在子组件中,定义两个具名插槽:
<template><div class="about"><h1>This is an Children page</h1><!-- 给插槽加了个name属性,就是所谓的具名插槽了 --><slot name="one"></slot><slot name="two"></slot></div>
</template>
父组件中:
为了验证,子组件中的插槽可以填充任何结构的内容,所以我这边专门在one插槽中插入一个组件,而在two插槽就单纯插入一串普通的数据。
<template><div class="about"><h1>This is an Parent page</h1><children><template slot="one"><p>one插槽</p></template><template slot="two">two插槽</template></children></div>
</template>
// 上面这个是 2.6.0 之前的语法,下面这个是 2.6.0 之后的语法。
或
<template><div class="about"><h1>This is an Parent page</h1><children><template v-slot:one><p>one插槽</p></template><template v-slot:two>two插槽</template></children></div>
</template><script>
import Children from './Children.vue'
export default {components: {Children},data () {return {}}
}
</script>
页面结果:
当然,子组件可以定义多个同名的具名插槽:
<template><div class="about"><h1>This is an Children page</h1><!-- 给插槽加了个name属性,就是所谓的具名插槽了 --><slot name="one"></slot><slot name="two"></slot><slot name="two"></slot></div>
</template>
4.4、缩写
把参数之前的所有内容 (v-slot:
) 替换为字符 #
。例如 v-slot:header 可以被重写为 #header。
<children><template #[dynamicSlotName]="slotProps"><h2>{{slotProps.obj.name}}</h2></template></children>
然而,和其它指令一样,该缩写只在其有参数的时候才可用。这意味着以下语法是无效的:
<children><template #="slotProps"><h2>{{slotProps.obj.name}}</h2></template></children>
如果你希望使用缩写的话,你必须始终以明确插槽名取而代之:
<children><template #default="slotProps"><h2>{{slotProps.obj.name}}</h2></template></children>
5、作用域插槽的使用
5.1、什么是作用域插槽了
作用域插槽就是实现在子组件自行决定自己要显示什么内容
5.2、语法
<slot :自定义的name=data中的属性或对象></slot>
5.3、示例
子组件:
<template><div class="about"><h1>This is an Children page</h1><!-- 子组件中,告诉父组件我要实现obj里面的信息 --><slot :obj="obj"></slot></div>
</template><script>
export default {data () {return {obj: {name: 'children'}}}
}
</script>
父组件:
这种时候有一种情况需要注意:
如果子组件中只有一个作用域插槽且为默认插槽时,父组件可以使用下边这种简单的写法,当然规范点还是加在template模板标签好点:
<template><div class="about"><h1>This is an Parent page</h1><children v-slot="slotProps"><p>one插槽{{slotProps.obj.name}}</p></children></div>
</template><script>
import Children from './Children.vue'
export default {components: {Children},data () {return {}}
}
</script>
页面效果:
但是当子组件中有多个作用域插槽时,不建议上边这种简单的写法,因为可能会出现作用域不明确的问题。
子组件有多个作用域插槽时:
<template><div class="about"><h1>This is an Children page</h1><slot :obj="obj1" name="one"></slot><slot :obj="obj2" name="two"></slot></div>
</template><script>
export default {data () {return {obj1: {name: 'one slot'},obj2: {name: 'two slot'}}}
}
</script>
父组件使用这种规范的写法,可以避免有时作用域不明确问题:
<template><div class="about"><h1>This is an Parent page</h1><children><template v-slot:one="slotProps"><h2>{{slotProps.obj1.name}}</h2></template><template v-slot:two="twoSlotProps"><h2>{{twoSlotProps.obj2.name}}</h2></template></children></div>
</template><script>
import Children from './Children.vue'
export default {components: {Children},data () {return {}}
}
</script>
页面效果:
6、动态插槽名
6.1、什么是动态插槽名
动态指令参数也可以用在 v-slot 上,来定义动态的插槽名
6.2、示例
子组件:
<template><div class="about"><h1>This is an Children page</h1><slot :obj="obj1" name="one"></slot><slot :obj="obj2" name="two"></slot></div>
</template><script>
export default {data () {return {obj1: {name: 'one slot'},obj2: {name: 'two slot'}}}
}
</script>
父组件:
<template><div class="about"><h1>This is an Parent page</h1><children><template v-slot:[dynamicSlotName]="slotProps"><h2>{{slotProps.obj.name}}</h2></template></children></div>
</template><script>
import Children from './Children.vue'
export default {components: {Children},data () {return {dynamicSlotName: 'one'}}
}
</script>
显示效果:
写在最后
如果你感觉文章不咋地
//(ㄒoㄒ)//
,就在评论处留言,作者继续改进;o_O???
如果你觉得该文章有一点点用处,可以给作者点个赞;\\*^o^*//
如果你想要和作者一起进步,可以微信扫描二维码,关注前端老L;~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※
!!!
Vue系列之插槽(slot)详解相关推荐
- 【vue系列之二】详解vue-cli 2.0配置文件
上次给大家分享的是用vue-cli快速搭建vue项目,虽然很省时间和精力,但想要真正搞明白,我们还需要对其原理一探究竟. 大家拿到一个项目,要快速上手,正确的思路是这样的: 首先,如果在项目有read ...
- Vue中作用域插槽solt详解
- h2 不能访问localhost_SpringBoot2.x系列教程44--H2数据库详解及搭建Web控制台
SpringBoot2.x系列教程44--H2数据库详解及搭建Web控制台 作者:一一哥 我在上一章节中讲解了Spring Boot中整合Mybatis,接下来我给大家介绍一款内存数据库--H2. H ...
- 大型网站系统架构系列:负载均衡详解(一)
大型网站系统架构系列:负载均衡详解(一) 2016-03-20 架构说 面对大量用户访问.高并发请求,海量数据,可以使用高性能的服务器.大型数据库,存储设备,高性能Web服务器,采用高效率的编程语言比 ...
- keep alive PHP,vue中keep-alive使用方法详解
这次给大家带来vue中keep-alive使用方法详解,vue中keep-alive使用的注意事项有哪些,下面就是实战案例,一起来看一下. 1.keep-alive的作用以及好处 在做电商有关的项目中 ...
- 【百度飞浆】YOLO系列目标检测算法详解
YOLO系列目标检测算法详解 1 YOLO发展史 2 YOLO v3目标检测原理 3 PaddleDetection中YOLO v3模型介绍 4 YOLO v3配置演练 1 YOLO发展史 2 YOL ...
- 【百度飞浆】RCNN系列目标检测算法详解
RCNN系列目标检测算法详解 目录 两阶段目标检测算法发展历程 R-CNN R-CNN网络结构 R-CNN网络效果 Fast R-CNN Fast R-CNN网络效果 Faster R-CNN Fas ...
- php动态写入vue,Vue自定义动态组件使用详解
这次给大家带来Vue自定义动态组件使用详解,Vue自定义动态组件的注意事项有哪些,下面就是实战案例,一起来看一下. 现在基于vue的UI组件库有很多,比如iview,element-ui等.但有时候这 ...
- Maven精选系列--三种仓库详解
转载自 Maven精选系列--三种仓库详解 仓库分类 1.本地仓库 本地仓库就是开发者本地已经下载下来的或者自己打包所有jar包的依赖仓库,本地仓库路径配置在maven对应的conf/settings ...
- kubernetes系列10—存储卷详解
kubernetes系列10-存储卷详解 1.认识存储卷 1.1 背景 默认情况下容器中的磁盘文件是非持久化的,容器中的磁盘的生命周期是短暂的,这就带来了一系列的问题:第一,当一个容器损坏之后,kub ...
最新文章
- Java反射机制分析指南
- Lintcode 569解题思路及c++代码
- Python实现微信消息防撤回
- Spring JTA multiple resource transactions in Tomcat with Atomikos example--转载
- Makefile的重建与include指令
- php里注册管理员账号,WordPress中创建用户角色的相关PHP函数使用详解
- 牛客题霸 NC1 大数加法
- boost::mpl::less_equal相关的测试程序
- scanf可以输入负数吗_C语言进行数据的多输入多输出
- js获取日期选择器值html,利用Query+bootstrap和js两种方式实现日期选择器
- AI顶会论文“趋势”:对新方法的过度关注,与现实问题的脱节
- 怎么找网页源文件位置_html网页源代码是什么 如何查看网页源代码经验篇
- 关于Navicat Premium 12注册机被windows病毒防护自动删除的问题解决
- erp框架 saas_Saas模式ERP系统
- 贝叶斯统计在投资决策中的应用
- 软件测试工程师面试如何描述自动化测试是怎么实现的?
- Kotlin真的值得学习吗?
- 【PowerQuery】在Excel中手动刷新数据连接
- XM外汇是什么平台?可以交易哪些产品?
- IBM要做挑茶AI,茶叶小妹都乐疯了