对React有理解的小伙伴肯定对 props.children这个属性不生疏。其实Vue里的slot和它的概念是差不多的。
我喜爱理解一个知识点的时候，先去查阅它的英文意思，这样真的能够帮忙咱们粗浅的了解这个办法的原意。
英语真的是十分十分重要的，然而这货色是一个细水长流缓缓积攒的过程，不可能狂补几天就能把握的。所以我倡议能够买一个本本每天记录一下本人遇到的生疏单词。因为到前面会越发感觉到英文文档的重要性，还有就是些第三方库是没有中文文档的。
注释
一.一般slot
从名字咱们就能够大抵理解，这个货色大略是用来往标签里查某些数据用的。
1.筹备两个简略的组件构建一个页面。只需看我框住的内容即可，其它中央与本篇文章内容无关。
绝对应的界面也是非常简单，款式就不贴出来了。
2.在这里咱们思考一下，凭什么区区一个原生html标签<h1>里就能够写内容，难到我堂堂一个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变量反向传给<slot>标签呢？
3.会不会想到一个办法props？
没错，和它十分类似。咱们在slotText.vue文件内这样写。
当然，这个id是我轻易起的，你还能够叫myName
4.接下来怎么在App组件内接管呢？
这个slotProps也能够本人定义，当然，如果你es6的构造赋值玩的溜的话，也能够这样写。
还有，你感觉myName这个名字不好听，也能够这样写
看不懂的盲目去温习es6，我列出的都是罕用的办法！
这几种办法页面都能够失常展现出咱们想要的成果。
补充
让我不解的中央是，当我要传递的props的key如果和name这个变量同名的话，页面没成果。
在App组件内也不会有任何谬误提醒，太奇怪了！！！