Vue3中插槽<slot>的概念和用法

简介: Vue3中插槽<slot>的概念和用法

对React有了解的小伙伴一定对 props.children这个属性不陌生。其实Vue里的slot和它的概念是差不多的。

我喜欢了解一个知识点的时候,先去查阅它的英文意思,这样真的可以帮助我们深刻的理解这个方法的原意。

英语真的是非常非常重要的,但是这东西是一个细水长流慢慢积累的过程,不可能狂补几天就能掌握的。所以我建议可以买一个本本每天记录一下自己遇到的陌生单词。因为到后面会越发感觉到英文文档的重要性,还有就是些第三方库是没有中文文档的。

a649cad285924c22aab27d7fcf79aef1_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.jpg

77f86c7b250b45e097b74f148756272a_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.jpg

正文

一.普通slot


image.png

从名字我们就可以大致了解,这个东西大概是用来往标签里查某些数据用的。

1.准备两个简单的组件构建一个页面。只需看我框住的内容即可,其它地方与本篇文章内容无关。

image.png

相对应的界面也是非常简单,样式就不贴出来了。

image.png

image.png

2.在这里我们思考一下🤔,凭什么区区一个原生html标签<h1>里就可以写内容,难到我堂堂一个Vue组件slotText不可以写内容吗?

image.png

答案是肯定可以的,我们写一一下试试。

image.png

好像浏览器和vscode都没有报错,好耶!

但是我们好像高兴的太早了...

image.png

什么情况啊?我明明写内容了,我页面上的内容呢?为什么不帮我渲染呢?

3.让我们回到slotText组件看一下。

image.png

我们可能潜意识的说,你直接帮我渲染到div里不就可以了吗?但是Vue可还没智能到猜你到底想要放哪里那种程度,那万一你的意思是放在另外两处,那页面不就乱了套了吗?

image.png

4.这就需要我们提前预留出一个,告诉vue我们想要渲染到哪里。没错,非常简单,就是放一个标签slot

image.png

看看页面效果。

image.png

没错,就是这么简单。

二.具名插槽


1.说人话就是,slot有了自己的名字,可以利用这个name属性帮你更灵活的安排自己的组件。让我们返回App组件。

现在,我的slotText标签体有一个h1标签和一个h3标签。

image.png

2.我现在想实现下面的效果,就是我写在slotText内的内容,可以放到我原来内容的上面和下面。

image.png

3.我们的第一直觉就是,这还不简单?看我这样写就完事了,于是在slotText.vue文件内这样写:

image.png

我也太聪明了吧,我真是个天才啊~但是我回到页面看一下呢?

image.png

vue好像傻傻的帮我们渲染了两遍...

其实这样不能怪vue,因为它不知道你的意思到底是怎样。(就好像你永远猜不透你女朋友的心思一样)vue也很无奈啊。

4.没关系,这时候vue给你一个锦囊,你打开,上面写到,你可以给slot起一个名字。

image.png

接下来就是告诉App组件,你得按照我的规矩办事,在这里我们不卖官子,直接告诉大家有v-slot这个API。那还愣着干啥,赶紧着手写吧!

image.png

写到一半发现,好像飘红了,看看错误是什么。

image.png

vue说,这个API只能用在一个组件上,或者template标签内,这里直接告诉大家答案。需要这样写:

image.png

注意,不是等号字符串的那种书写格式。

5.看看页面效果

image.png

完美。

三.作用域插槽


这个名字不太好解释,我们从一个需求来分析这个意思。

1.我们现在把组件都退回到原来的状态

image.png

image.png

2.这时候,我们提出需求,在slotText组件里有一个变量name需要渲染到页面上,但是我不希望这个变量被定义到App组件上。再简单说一步,我可不可以把name变量反向传给<slot>标签呢?

image.png

3.会不会想到一个方法props

没错,和它非常相似。我们在slotText.vue文件内这样写。

image.png

当然,这个id是我随便起的,你还可以叫myName

image.png

4.接下来怎么在App组件内接收呢?

image.png

这个slotProps也可以自己定义,当然,如果你es6的结构赋值玩的溜的话,也可以这样写。

image.png

还有,你觉得myName这个名字不好听,也可以这样写

image.png

看不懂的自觉去复习es6,我列出的都是常用的方法!

这几种方法页面都可以正常展示出我们想要的效果。

image.png

补充

让我不解的地方是,当我要传递的propskey如果和name这个变量同名的话,页面没效果。

image.png

App组件内也不会有任何错误提示,太奇怪了!!!

image.png

相关文章
|
6天前
|
开发工具 iOS开发 MacOS
基于Vite7.1+Vue3+Pinia3+ArcoDesign网页版webos后台模板
最新版研发vite7+vue3.5+pinia3+arco-design仿macos/windows风格网页版OS系统Vite-Vue3-WebOS。
103 10
|
1月前
|
缓存 前端开发 大数据
虚拟列表在Vue3中的具体应用场景有哪些?
虚拟列表在 Vue3 中通过仅渲染可视区域内容,显著提升大数据列表性能,适用于 ERP 表格、聊天界面、社交媒体、阅读器、日历及树形结构等场景,结合 `vue-virtual-scroller` 等工具可实现高效滚动与交互体验。
245 1
|
1月前
|
缓存 JavaScript UED
除了循环引用,Vue3还有哪些常见的性能优化技巧?
除了循环引用,Vue3还有哪些常见的性能优化技巧?
144 0
|
2月前
|
JavaScript
vue3循环引用自已实现
当渲染大量数据列表时,使用虚拟列表只渲染可视区域的内容,显著减少 DOM 节点数量。
95 0
|
4月前
|
JavaScript 前端开发 API
Vue 2 与 Vue 3 的区别:深度对比与迁移指南
Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架,在过去的几年里,Vue 2 一直是前端开发中的重要工具。而 Vue 3 作为其升级版本,带来了许多显著的改进和新特性。在本文中,我们将深入比较 Vue 2 和 Vue 3 的主要区别,帮助开发者更好地理解这两个版本之间的变化,并提供迁移建议。 1. Vue 3 的新特性概述 Vue 3 引入了许多新特性,使得开发体验更加流畅、灵活。以下是 Vue 3 的一些关键改进: 1.1 Composition API Composition API 是 Vue 3 的核心新特性之一。它改变了 Vue 组件的代码结构,使得逻辑组
1500 0
|
8天前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
103 2
|
3月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
529 0
|
3月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
|
4月前
|
JavaScript 数据可视化 前端开发
基于 Vue 与 D3 的可拖拽拓扑图技术方案及应用案例解析
本文介绍了基于Vue和D3实现可拖拽拓扑图的技术方案与应用实例。通过Vue构建用户界面和交互逻辑,结合D3强大的数据可视化能力,实现了力导向布局、节点拖拽、交互事件等功能。文章详细讲解了数据模型设计、拖拽功能实现、组件封装及高级扩展(如节点类型定制、连接样式优化等),并提供了性能优化方案以应对大数据量场景。最终,展示了基础网络拓扑、实时更新拓扑等应用实例,为开发者提供了一套完整的实现思路和实践经验。
536 77
|
2月前
|
JavaScript 安全
在 Vue 中,如何在回调函数中正确使用 this?
在 Vue 中,如何在回调函数中正确使用 this?
105 0