共计 1592 个字符，预计需要花费 4 分钟才能阅读完成。
对 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 组件内也不会有任何谬误提醒，太奇怪了！！！
