对React有了解的小伙伴一定对 props.children这个属性不陌生。其实Vue里的slot和它的概念是差不多的。
我喜欢了解一个知识点的时候，先去查阅它的英文意思，这样真的可以帮助我们深刻的理解这个方法的原意。
英语真的是非常非常重要的，但是这东西是一个细水长流慢慢积累的过程，不可能狂补几天就能掌握的。所以我建议可以买一个本本每天记录一下自己遇到的陌生单词。因为到后面会越发感觉到英文文档的重要性，还有就是些第三方库是没有中文文档的。
文章图片
文章图片
正文
一.普通slot
文章图片
从名字我们就可以大致了解，这个东西大概是用来往标签里查某些数据用的。
1.准备两个简单的组件构建一个页面。只需看我框住的内容即可，其它地方与本篇文章内容无关。
文章图片
相对应的界面也是非常简单，样式就不贴出来了。
文章图片
文章图片
2.在这里我们思考一下，凭什么区区一个原生html标签里就可以写内容，难到我堂堂一个Vue组件slotText不可以写内容吗？
文章图片
答案是肯定可以的，我们写一一下试试。
文章图片
好像浏览器和vscode都没有报错，好耶！
但是我们好像高兴的太早了...
文章图片
什么情况啊？我明明写内容了，我页面上的内容呢？为什么不帮我渲染呢？
3.让我们回到slotText组件看一下。
文章图片
我们可能潜意识的说，你直接帮我渲染到div里不就可以了吗？但是Vue可还没智能到猜你到底想要放哪里那种程度，那万一你的意思是放在另外两处，那页面不就乱了套了吗？
文章图片
4.这就需要我们提前预留出一个坑，告诉vue我们想要渲染到哪里。没错，非常简单，就是放一个标签slot！
文章图片
看看页面效果。
文章图片
没错，就是这么简单。
二.具名插槽
1.说人话就是，slot有了自己的名字，可以利用这个name属性帮你更灵活的安排自己的组件。让我们返回App组件。
现在，我的slotText标签体有一个h1标签和一个h3标签。
文章图片
2.我现在想实现下面的效果，就是我写在slotText内的内容，可以放到我原来内容的上面和下面。
文章图片
3.我们的第一直觉就是，这还不简单？看我这样写就完事了，于是在slotText.vue文件内这样写：
文章图片
我也太聪明了吧，我真是个天才啊～但是我回到页面看一下呢？
文章图片
vue好像傻傻的帮我们渲染了两遍...
其实这样不能怪vue，因为它不知道你的意思到底是怎样。（就好像你永远猜不透你女朋友的心思一样）vue也很无奈啊。
4.没关系，这时候vue给你一个锦囊，你打开，上面写到，你可以给slot起一个名字。
文章图片
接下来就是告诉App组件，你得按照我的规矩办事，在这里我们不卖官子，直接告诉大家有v-slot这个API。那还愣着干啥，赶紧着手写吧！
文章图片
写到一半发现，好像飘红了，看看错误是什么。
文章图片
vue说，这个API只能用在一个组件上，或者template标签内，这里直接告诉大家答案。需要这样写：
文章图片
注意，不是等号字符串的那种书写格式。
5.看看页面效果
文章图片
完美。
三.作用域插槽
这个名字不太好解释，我们从一个需求来分析这个意思。
1.我们现在把组件都退回到原来的状态
文章图片
文章图片
2.这时候，我们提出需求，在slotText组件里有一个变量name需要渲染到页面上，但是我不希望这个变量被定义到App组件上。再简单说一步，我可不可以把name变量反向传给标签呢？
文章图片
3.会不会想到一个方法props？
没错，和它非常相似。我们在slotText.vue文件内这样写。
文章图片
当然，这个id是我随便起的，你还可以叫myName
文章图片
4.接下来怎么在App组件内接收呢？
文章图片
这个slotProps也可以自己定义，当然，如果你es6的结构赋值玩的溜的话，也可以这样写。
文章图片
还有，你觉得myName这个名字不好听，也可以这样写
文章图片
看不懂的自觉去复习es6，我列出的都是常用的方法！
这几种方法页面都可以正常展示出我们想要的效果。
文章图片
补充
让我不解的地方是，当我要传递的props的key如果和name这个变量同名的话，页面没效果。
文章图片
在App组件内也不会有任何错误提示，太奇怪了！！！
【Vue3中插槽的概念和用法】
文章图片
推荐阅读
- 关于Vue3的defineProps用法
- elementUI Tree树形控件如何设置默认树节点
- vue2 生命周期详解
- element-uishow-overflow-tooltip 使用
- 深入理解 v-model 的原理
- Vue.js 设计与实现 - 权衡的艺术