深入浅出 Vue 中的插槽 slot

深入浅出 Vue 中的插槽 slot

start

  • 最近被问到好几次 Vue 中的插槽相关知识，掌握的还是有些不全面。
  • 抱着重新学习的心态，写这篇博客。首先对基础知识做一个回顾，然后再对源码实现做一个学习。
  • 作者：番茄
  • 编写时间：2023/11/27

1.什么是插槽？

在日常代码编写的过程中，针对高频出现的业务场景，我会它把封装一个组件，然后多个地方去使用。

但是在某些情况下，一个组件并不能兼容所有的场景。

就比如对话框组件，可能每个人都会用到对话框，但是对话框中的内容会根据需求千变万化。这个时候就要考虑有没有什么方法，可以让我们对话框中的内容变成动态的呢？

答案：有，使用插槽就可以满足我们的需求。

插槽的概念有点类似 JavaScript 中的插值表达式，在代码在保留一个占位符，然后动态的向占位符中传入内容。

// 插值表达式
var name = '番茄'var str = `<div>
我是 ${name}
</div>`

2. 插槽的使用

上面提到了插槽，现在我们结合示例，一步一步学习插槽的用法

1. 父组件引入子组件的基本用法

父组件 app.vue

<template><div id="app"><Son></Son></div>
</template><script>
import Son from "./son.vue";export default {components: {Son,},
};

子组件 son.vue

<template><div class="son"><h1>我是子组件 son</h1></div>
</template>

运行效果

在这里插入图片描述

总结

上面的示例展示了一个基本的父组件使用子组件的用法。

2. 父组件在子组件中传入文本

父组件 app.vue

<template><div id="app"><Son>向子组件中传入文本</Son></div>
</template><script>
import Son from "./son.vue";export default {components: {Son,},
};
</script>

子组件 son.vue

<template><div class="son"><h1>我是子组件 son</h1></div>
</template>

运行效果

在这里插入图片描述

总结

在父组件中使用子组件，当子组件中没有插槽没有 <slot></slot> 的时候，在父组件中向子组件中传递内容，这些内容并不会展示。

3.基础插槽的使用（不传入内容）

父组件 app.vue

<template><div id="app"><Son>  </Son></div>
</template><script>
import Son from "./son.vue";export default {components: {Son,},
};
</script>

子组件 son.vue

<template><div class="son"><h1>我是子组件 son</h1><slot>我是插槽的默认内容</slot></div>
</template>

运行效果

在这里插入图片描述

总结

上面的示例是一个基础的插槽使用演示。父组件使用子组件，但是不向子组件传入内容，此时，展示的内容是 <slot>默认内容</slot> 中默认的内容。

4. 基础插槽的使用（传入内容）

父组件 app.vue

<template><div id="app"><Son>这是我自己DIY的内容</Son></div>
</template><script>
import Son from "./son.vue";export default {components: {Son,},
};
</script>

子组件 son.vue

<template><div class="son"><h1>我是子组件 son</h1><slot>我是插槽的默认内容</slot></div>
</template>

运行效果

在这里插入图片描述

总结:

上面的示例是一个基础的插槽使用演示。父组件使用子组件，且向子组件传入内容。

此时，展示的内容是我们在父组件中传入的内容。此时就可以满足我们定制化的需要了。

这就是最基础的组件使用方法了

5. 同一个子组件，需要多个插槽如何处理？

掌握了插槽的基础使用方法后，会有一个衍生的问题。

如果同一个组件中需要多个插槽，如何处理？

答： 可以使用具名插槽，顾名思义，就是可以给插槽取名字，然后根据名称去匹配插槽。

父组件 app.vue

<template><div id="app"><Son>这是我自己DIY的内容<template v-slot:lazy>LAZY</template><template v-slot:tomato>TOMATO</template></Son></div>
</template><script>
import Son from "./son.vue";export default {components: {Son,},
};
</script>
<style>
#app {width: 400px;height: 400px;background: pink;
}
</style>

子组件 son.vue

<template><div class="son"><h1>我是子组件 son</h1><br /><slot> 我是什么都不写的插槽 </slot><br /><slot name="lazy"> 我是lazy </slot><br /><slot name="tomato"> 我是tomato </slot><br /><slot> 我是什么都不写222 </slot><br /><slot name="lazy"> 我是lazy </slot></div>
</template>
<style>
.son {background: yellow;
}
</style>

运行效果

在这里插入图片描述

总结

由上面的运行效果，我们知道：

  1. 针对一个组件中有多个插槽的情况，我们可以使用 name 对插槽进行命名。然后在父组件中使用插槽的时候，使用 <template> 标签，加上 v-solt:对应插槽名称 的形式匹配到对应的插槽；

  2. 在子组件组件中，没有写 name 属性的插槽，会默认的使用 default 名称，然后匹配没有被 template 标签包裹的内容；

  3. 子组件中相同 name 的插槽可以有多个；

    既然同一个组件中，可以存在多个相同 name 的插槽，是不是可以利用这个特性，实现重复内容的复制？

  4. 在使用v-solt 的时候，注意使用的是: 冒号连接，而且子组件绑定名称的时候， name= 的后面不需要添加引号。

    我在编写示例的时候，将 v-slot:lazy 误写成 v-slot=lazy 的形式了，发现代码并不生效。所以请注意使用的是冒号

    v-slot: 类似 v-on: v-bind: 都是指令，所以这个地方不要弄混淆了。

  5. v-slot:也和 v-on: v-bind: 类似，有语法糖 # 代替即可。

    在这里插入图片描述

  6. v-slot:单词不要打错了！！正确写法： **slot**

6. 作用域插槽

除了具名插槽，还有一种插槽：作用域插槽。

绝大多数情况，上面介绍的两种方式已经满足我们的业务需求了。

  1. 插槽默认值;
  2. 父组件定义插槽内容;

这两种方式，展示的数据和形式，由父组件控制。

但是还有一种情况，就是希望可以拿到子组件的数据，然后父组件控制如何展示。

这个时候就需要使用作用域插槽了。

子组件可以设置插槽的数据，然后数据如何展示，由外部的组件决定。

首先在子组件中绑定一个数据

:sonList="list" :向外暴露的变量名="子组件内部的变量名" > 子组件

子组件 son.vue

<template><div class="son"><h1>我是子组件</h1><br /><slot name="lazy" :sonList="list"> </slot></div>
</template><script>
export default {data() {return {list: [{index: 1,name: '张三',},{index: 2,name: '李四',},{index: 3,name: '王五',},{index: 4,name: '赵六',},],}},
}
</script>

然后就是在父组件区使用我们的子组件，然后定义子组件插槽渲染的内容

v-slot:lazy="data",首先使用v-slot:lazy绑定我们的数据。然后在后面接等于号，用data去接收，然后再用data.子组件暴露的变量名使用

父组件 app.vue

<template><div id="app"><Son><template v-slot:lazy="data">LAZY{{ data.sonList }}</template></Son></div>
</template><script>
import Son from './son.vue'export default {components: {Son,},
}
</script>

在这里插入图片描述

总结

  • 作用域插槽的使用方式：

    v-slot:插槽名="接收的变量名"：<template v-slot:插槽名="接收的变量名">

  • 其实本质上就是子组件向外暴露数据，父组件控制子组件具体展示。

小结

本文主要对 Vue 中的插槽的使用做了一个基础说明。

按照插槽的类型区分，可以分为三类：

  1. 默认插槽；
  2. 具名插槽；
  3. 作用域插槽；
  • 默认插槽就是绑定默认的内容；
  • 具名插槽就是给插槽定义名称，用以区分组件；
  • 作用域插槽就是子组件向外暴露数据，由父组件完全控制插槽内容的展示。

end

插槽的使用，整体难度不大。注意一下使用的语法即可。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/228114.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

ArkTS-WebView内嵌H5页面

ArkTS-WebView内嵌H5页面

鸿蒙开发使用WebView内嵌H5页面 访问在线网页时需添加网络权限&#xff1a;ohos.permission.INTERNET module.json5文件配置 {"module" : {"requestPermissions":[{"name": "ohos.permission.INTERNET"}]} }踩坑日记 加载网页效果无法…
阅读更多...
Java---权限修饰符、final、static

Java---权限修饰符、final、static

文章目录 1. 权限修饰符2. final(最终态)3. static(静态) 1. 权限修饰符 修饰符同一个类中同一个包中的子类和无关类不同包的子类不同包的无关类private√默认√√protected√√√public√√√√ 2. final(最终态) 1. final关键字是最终的意思&#xff0c;可以修饰成员方法、…
阅读更多...
《数据结构与测绘程序设计》试题详细解析（仅供参考）

《数据结构与测绘程序设计》试题详细解析（仅供参考）

一. 选择题&#xff08;每空2分&#xff0c;本题共30分&#xff09; &#xff08;1&#xff09;在一个单链表中&#xff0c;已知q所指结点是p所指结点的前驱结点&#xff0c;若在q和p之间插入结点s&#xff0c;则执行( B )。 A. s->nextp->next; p->nexts; …
阅读更多...
第3章 表、栈和队列

第3章 表、栈和队列

前言 本章讨论最简单和最基本的三种数据结构。实际上&#xff0c;每一个有意义的程序都将至少明确使用一种这样的数据结构&#xff0c;而栈则在程序中总是隐含使用&#xff0c;不管你在程序中是否做了声明。 在这一章&#xff0c;我们将&#xff1a; 介绍抽象数据类型…
阅读更多...
Asp.net core WebApi 配置自定义swaggerUI和中文注释

Asp.net core WebApi 配置自定义swaggerUI和中文注释

1.创建asp.net core webApi项目 默认会引入swagger的Nuget包 <PackageReference Include"Swashbuckle.AspNetCore" Version"6.2.3" />2.配置基本信息和中文注释&#xff08;默认是没有中文注释的&#xff09; 2.1创建一个新的controller using Micr…
阅读更多...
Apipost也出IDEA插件了？Apipost-Helper！

Apipost也出IDEA插件了？Apipost-Helper！

IDEA是一款功能强大的集成开发环境&#xff08;IDE&#xff09;&#xff0c;它可以帮助开发人员更加高效地编写、调试和部署软件应用程序。我们在编写完接口代码后需要进行接口调试等操作&#xff0c;一般需要打开额外的调试工具。 今天给大家介绍一款IDEA插件&#xff1a;Api…
阅读更多...
WordPress插件大全-免费的WordPress插件汇总

WordPress插件大全-免费的WordPress插件汇总

随着互联网的不断发展&#xff0c;网站建设变得日益普及。对于大多数人而言&#xff0c;WordPress是一个熟悉且易于使用的网站建设平台。然而&#xff0c;有时候我们可能会觉得WordPress的功能还不够满足我们的需求&#xff0c;这时候&#xff0c;插件就成了解决问题的得力工具…
阅读更多...
【工具】Zotero｜使用Zotero向Word中插入引用文献（2023年）

【工具】Zotero｜使用Zotero向Word中插入引用文献（2023年）

版本&#xff1a;Word 2021&#xff0c;Zotero 6.0.30 前言&#xff1a;两年前我找网上插入文献的方式&#xff0c;网上的博客提示让我去官网下个插件然后才能装&#xff0c;非常麻烦&#xff0c;导致我对Zotero都产生了阴影。最近误打误撞发现Zotero自带了Word插件&#xff0c…
阅读更多...
每天五分钟计算机视觉：经典架构的力量与启示

每天五分钟计算机视觉：经典架构的力量与启示

在深度学习和计算机视觉领域，卷积神经网络（Convolutional Neural Networks，简称CNN）无疑是最为经典的架构之一。近年来，随着研究的不断深入和新架构的不断涌现，许多初学者可能会忽视这些经典架构的重要性。然而，理解并学习这些经典架构，对于我们深入理解卷积神经网络的…
阅读更多...
大一学编程怎么学？刚接触编程怎么学习，有没有中文编程开发语言工具？

大一学编程怎么学？刚接触编程怎么学习，有没有中文编程开发语言工具？

大一学编程怎么学&#xff1f;刚接触编程怎么学习&#xff0c;有没有中文编程开发语言工具&#xff1f; 1、大一刚开始学编程&#xff0c;面对复杂的代码学习非常吃力&#xff0c;很难入门。建议刚接触编程可以先学习中文编程&#xff0c;了解其中的编程逻辑&#xff0c;学编程…
阅读更多...
openwrt配置SSL证书实现https加密访问

openwrt配置SSL证书实现https加密访问

前言&#xff1a;目前来看这个用处不是很大&#xff0c;因为只能访问一个端口&#xff0c;且因为80和443都已经被运营商封了&#xff0c;所以访问时还是得带端口。以下以阿里云证书为例&#xff1a; 一、申请证书 这个很简单&#xff0c;不想去截图了&#xff0c;直接去申请你…
阅读更多...
计算机杂谈系列精讲100篇-【计算机应用】PyTorch部署及分布式训练

计算机杂谈系列精讲100篇-【计算机应用】PyTorch部署及分布式训练

目录 C平台PyTorch模型部署流程 1.模型转换 1. 不支持的操作 2. 指定数据类型 2.保存序列化模型 3.C load训练好的模型 4. 执行Script Module PyTorch分布式训练 分布式并行训练概述 Pytorch分布式数据并行 手把手渐进式实战 A. 单机单卡 B. 单机多卡DP C. 多机多卡DDP D. L…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023