slot（插槽）的理解？使用场景？

1. 什么是插槽？

父组件通过slot向子组件内部指定位置插入内容。即将slot元素作为承载分发内容的出口

2. 插槽分类

1）默认插槽
2）具名插槽
3）作用域插槽

1）默认插槽

通常将插槽比作一个占位符，有内容进来时，自动把 slot 给替换掉。没有内容进来时，默认显示slot标签中的内容

<template><div class="child-box"><p>我是子组件</p><!-- 插槽 --><slot><p>我是默认内容</p></slot></div>
</template>

<template><div><p>我是父组件</p><child></child><!-- child标签中若添加内容，slot位置则显示添加内容，不显示slot默认内容 --></div>
</template>

结果：slot标签中的“我是默认内容”被渲染出来

2）具名插槽

-1：子组件用name属性来表示插槽的名字，不传为默认插槽
-2：父组件通过v-slot : name 的方式添加内容，该指令需要作用在 template 元素上
-3：v-slot : name可以简写为#name

<template><div><p>我是子组件</p><header><slot name="header"></slot></header><main><!--没有添加 name 属性时, Vue 会隐式的将这个插槽命名为“default” --><slot></slot></main><footer><slot name="footer"></slot></footer></div>
</template>

<template><div><child><template v-slot:header><div>我是 header</div></template><div>我没有名字1</div><div>我没有名字2</div><div>我没有名字3</div><template #footer><div>我是 footer</div></template></child></div>
</template>

注意以下这种情况：

<template><div><child><template v-slot:header><div>我是 header</div></template><div>我没有名字1</div><div>我没有名字2</div><template #default><div>我没有名字3</div></template><template #footer><div>我是 footer</div></template></child></div>
</template>

3）作用域插槽

插槽内容可以访问到父组件的数据作用域，但无法访问到子组件的数据
-1：子组件在slot标签中绑定属性来将子组件的信息传给父组件使用
-2：父组件中在使用时通过v-slot:（简写：#）获取子组件的信息，在内容中使用

默认插槽作用域传值

<template><div><p>我是子组件</p><slot text="我是默认插槽" :count="1"></slot></div>
</template>

<template><div><!-- 只有默认插槽时，可以将v-slot写在组件标签上。多个插槽时，写在组件标签上会报错--><child v-slot="slotProps"><div>{{slotProps}}</div></child></div>
</template>

具名插槽作用域传值

<template><div><p>我是子组件</p><slot text="我是默认插槽" :count="1"></slot><slot name="header" text="我是header插槽" :count="2"></slot></div>
</template>

<template><div><child><template v-slot:default="slotProps"><div>{{slotProps}}</div></template><template #header="{text,count}"><!--解构写法 --><div>{{text}}---{{count}}</div></template></child></div>
</template>

小结：v-slot属性只能在<template>上使用，只有默认插槽时可以在组件标签上使用默认插槽名为default，可以省略default直接写v-slot缩写为#时不能不写参数，写成#default可以通过解构获取v-slot={user}，还可以重命名v-slot="{user: newName}"和定义默认值v-slot="{user = '默认值'}"

3. 插槽应用场景

-1: UI 组件库中的弹窗，如果我们没有传入弹窗的头部或者底部，那么弹窗便会有默认的样式效果，这里就用到了 slot 的默认内容功能。弹窗中的内容也可以通过slot进行自定义
-2：当引用公用组件时，公用组件在不同的页面中，可能显示不同。这时可以使用插槽动态显示不同的内容

4. slot与props区别

通过props属性，父组件可以向子组件传递属性、方法，可是父组件不能通过属性传递带标签的内容、甚至是组件，而插槽可以。

参考文章：
https://zhuanlan.zhihu.com/p/529152853

slot（插槽）的理解？使用场景？相关推荐

【前端知识之Vue】对插槽（slot）的理解
前言本系列主要整理前端面试中需要掌握的知识点.本节介绍对插槽(slot)的理解. 文章目录前言一.插槽(slot)是什么二.使用场景三.slot的分类默认插槽具名插槽作用域插槽四.面 ...
vue slot scope使用_20、slot插槽的用法
重点: 单个插槽.具名插槽.作用域插槽的用法: 访问插槽的方法. 其实本小白对插槽理解的还不深,哪些场景会经常用到插槽也不了解. 但是本着"大胆猜测"的理念,我的猜测如下: 假设有 ...
Vue学习笔记（三）Vue2三种slot插槽的概念与运用 | ES6 对象的解构赋值 | 基于Vue2使用axios发送请求实现GitHub案例 | 浏览器跨域问题与解决
文章目录一.参考资料二.运行环境三.Vue2插槽 3.1 默认插槽 3.2 具名插槽 3.3 作用域插槽 ES6解构赋值概念 & 作用域插槽的解构赋值 3.4 动态插槽名四.GitHu ...
Vue中的Ajax②(slot插槽)
文章目录案例引入默认插槽具名插槽作用域插槽总结案例引入我们现在有一个需求: 代码: App组件: <template><div class="containe ...
slot的含义和使用场景
一.slot是什么在HTML中slot元素,是Web组件里面的一个占位符,该占位符可以在后期使用自己的标记语言填充 slot 艺名插槽,花名"占坑",我们可以理解为solt在组件 ...
Vue3中slot插槽使用方式
一文搞懂Vue3中slot插槽的使用! 使用 Vue 的小伙伴相信你一定使用过插槽,如果你没有用过,那说明你的项目可能不是特别复杂.插槽(slot)可以说在一个 Vue 项目里面处处都有它的身影,比如 ...
vue插槽面试题_Vue 的slot插槽及一个奇怪的面试题
slot 插槽,主要用来做内容分发主要有三种操作方式: 默认插槽具名插槽作用域插槽默认插槽没有太多的逻辑,就是把父组件的内容分发到子组件的指定位置 // 父组件 {{msg}} // 子组件 ...
三分钟带你弄懂slot插槽——vue进阶
文章目录三分钟带你弄懂slot插槽--vue进阶一.概述程序员之死什么是 slot插槽? 2.6.0 版本中的 slot 二.具名插槽例子效果图代码三.小惊喜三分钟带你弄懂slot插 ...
vite+vue3使用slot插槽
如何简单明了使用slot插槽在官网已经表明如何使用,但我觉得看的有点小乱,本文章记录一下,也是整理自己的思路使用solt的理由:在不同的组件使用,它最核心的地方展示是不一样的,但其它的地方是一样的 ...
[vue] slot插槽默认插槽，具名插槽，作用域插槽
文章目录插槽不使用插槽效果分析默认插槽效果分析具名插槽效果分析作用域插槽效果分析再次理解作用域插槽代码: 默认插槽: 具名插槽作用域插槽插槽作用:让父组件可以向子组 ...

slot（插槽）的理解？使用场景？

1. 什么是插槽？

2. 插槽分类

1）默认插槽

2）具名插槽

3）作用域插槽

3. 插槽应用场景

4. slot与props区别

slot（插槽）的理解？使用场景？相关推荐

最新文章

热门文章