什么是slot
为了让组件可以组合，我们需要一种方式来混合父组件的内容和子组件的模板，这个过程称为内容分发；
Vue.js实现了一个内容分发的API，使用一个特殊的slot元素，作为原始内容的插槽。
编译作用域
-
先看父组件的作用域，在红圈内都是父组件的作用域，所以，无论是在#app里写的方法，还是绑定的属性，或者直接用的data数据，作用域都是父组件的
image.png -
子组件的作用域，只在template范围内
image.png -
组件作用域，简单的说，就是：
- 父组件模板的内容，在父组件作用域内编译
- 子组件模板的内容，在子组件作用域内编译、
很简单的例子：
image.png
image.png
正常情况下 <my-component>里边插入的内容，是父级作用域范围内的，所以message是渲染不出来的
image.png
但是如果我们相要把这些内容，在子组件中渲染出来，插入到子组件的template里边，要怎么办呢，这个时候，就需要用到slot了；先看下单个插槽的例子
image.png
如果父组件没有插入内容，那么就会显示子组件的slot默认内容
image.png
具名插槽
image.png
image.png
作用域插槽(简单理解--从子组件中获取数据)
image.png
image.png
访问插槽。
- 方法：this.$slots.(slot的name)
-
类似于 访问子组件 ，this.$refs[子组件的ref]
image.png
image.png
