likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 272

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

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

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

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

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


正文

一.普通slot

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

看看页面效果。

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

没错,就是这么简单。

二.具名插槽

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

5.看看页面效果

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

完美。

三.作用域插槽

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


补充

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

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

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

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