B.vue
将B组件引入A组件里面（此时B为A的子组件）
页面效果如下：
准备工作完毕，现在，在B组件里面使用插槽（slot）
此时页面并无变化（最开始的情况），当然，B组件中使用了插槽slot之后，相当于留下了一个“坑”，占了个位置。 那么如何验证其存在了呢？
此时，修改A组件里面的代码
此时页面的效果如下：
页面中多出了在A中用B包裹的内容。没错，这就是插槽的基本使用，是不是很简单？
Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 Web Components 规范草案，将 <slot> 元素作为承载分发内容的出口。
如上面的例子，当组件渲染的时候，<slot></slot> 将会被替换为“验证插槽是否生效”（即指定内容）。插槽内可以包含任何模板代码，包括 HTML：
页面效果如下：
插槽内也可以放其他组件，如此时再新建一个组件C：
在A组件中，将B组件包裹的内容换成C组件：
页面效果如下：
此时检查页面元素，我们会发现，在原本B组件中的位置，替换成了C组件：
//B.vue
//观察页面元素,被替换成C组件
也印证了开篇对插槽作用的解释，即使用的组件指定的位置留一个坑，如果在外部，使用其组件包裹某内容（可以是任何模板代码，也可以是HTML，还可以是组件），则该内容就会被分发到处（一个有趣的说法就是把“坑”补上），渲染出来。当然，也可以不放任何内容，不影响组件渲染，就好比最开始的情况。
注意：如果B组件的 template 中没有包含一个 <slot> 元素，即不使用插槽，则该组件起始标签和结束标签之间的任何内容都会被抛弃。例如：
//B.vue
//A.vue
//此时在包裹的内容都会被抛弃
页面效果如下，在B组件中插入的C组件被抛弃了，因为B组件中没使用插槽：
后备（默认）内容
有时为一个插槽设置具体的后备 (也就是默认的) 内容是很有用的，它只会在没有提供内容的时候被渲染。例如在B组件中：
我们可能希望这个B组件内绝大多数情况下都渲染文本“我是B组件”。为了将“我是B组件”作为后备内容，我们可以将它放在 <slot> 标签内：
现在当我在一个父级组件中使用B组件并且不提供任何插槽内容时：
后备内容“我是B组件”将会被渲染：
但是如果我们提供内容：
我是插槽内容
则这个提供的内容将会被渲染从而取代后备内容：
具名插槽
所谓具名插槽，顾名思义就是起了名字的插槽。有时我们需要多个插槽，例如当我们想使用某种通用模板：
对于这样的情况，<slot> 元素有一个特殊的 attribute：name。这个 attribute 可以用来定义额外的插槽：
//B.vue
一个不带 name 的 <slot> 出口会带有隐含的名字“default”。
在向具名插槽提供内容的时候，我们可以在一个 <template> 元素上使用 slot 指令，并以 slot 的参数的形式提供其名称（当然也可以直接放在标签中，如
现在 <template> 元素中的所有内容都将会被传入相应的插槽。任何没有被包裹在带有slot 的 <template> 中的内容都会被视为默认插槽的内容。
页面效果如下：
观察页面元素，内容被放入相应名字的插槽中：
Tips：说到这里就不得不提一下，这种方式在项目中比较常用，可以当成一个复用（通用）模板组件。如多个组件的布局使用相似模板，只是具体内容不同，那么我们可以使用这种插槽方式封装成一个通用组件，在其他组件使用的时候只需要传对应的内容到对应名字的插槽即可，不需要将该模板在每个组件重新写一遍，减少代码冗余，大大提高开发效率。
作用域插槽
有时让插槽内容能够访问子组件中才有的数据是很有用的。现在，假设B组件：
总结
三套“算法宝典”
算法刷题LeetCode中文版（为例）
人与人存在很大的不同，我们都拥有各自的目标，在一线城市漂泊的我偶尔也会羡慕在老家踏踏实实开开心心养老的人，但是我深刻知道自己想要的是一年比一年有进步。
最后，我想说的是，无论你现在什么年龄，位于什么城市，拥有什么背景或学历，跟你比较的人永远都是你自己，所以明年的你看看与今年的你是否有差距，不想做咸鱼的人，只能用尽全力去跳跃。祝愿，明年的你会更好！
