slot 又称插槽，是Vue的内容分发机制，组件内部的模板引擎使用 slot 元素作为承载分发内容的出口。
插槽 slot 是子组件的一个模板标签元素，而这一个标签是否显示，以及如何显示都是由 父组件 所决定的。
slo t可分为三类：默认插槽、具名插槽以及作用域插槽。
默认插槽：又名 匿名插槽 ，当 slot 没有指定 name 属性值的时候一个默认显示插槽， 一个组件内只能有一个匿名插槽 。
子组件内部定义插槽， 插槽一定要放在子组件中
父组件中使用
在子组件中定义插槽时，给对应的插槽分别起个名字，方便后续父组件将内容根据 name 来填充到对应的位置。
使用具名插槽的方法：
如上所示，”标题“最终会替换掉”中间的“显示
插槽可以控制html模板的显示与不显示。作用域插槽其实就是带数据的插槽。原来父组件可以通过绑定数据传递给子组件。 作用域插槽就可以通过子组件绑定数据传递给父组件。
slot-scope 就相当于是一个对象，这个对象里面的数据就是子组件插槽绑定传上来了。在 vue 2.5.0+ slot-scope 不再限制在 <template>元素上使用，而可以用在插槽内的任何元素或组件上。
首先，Vue 会将 template 中的内容插到 DOM 中，以方便解析标签。由于 HTML 标签不区分大小写，所以在生成的标签名都会转换为小写。例如，当你的 template 为 <MyComponent></MyComponent>时，插入 DOM 后会被转换为 <mycomponent></mycomponent>。
然后，通过标签名寻找对应的自定义组件。 匹配的优先顺序从高到低为：原标签名、camelCase化的标签名、PascalCase化的标签名。 例如 <my-component>会依次匹配 my-component、myComponent、MyComponent。
注意的地方：
1.全局注册 VS 局部注册
3.注意：
4.组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。父组件的数据需要通过 prop 才能下发到子组件中。
5.Vue的组件里面也可以有data、template、methods、watch等属性，需要注意的是component中的data必须为一个函数参考Vue官网例子：
6.组件之双向绑定：.sync 修饰符
Vue 组件的 API 来自三部分——prop、事件和插槽：
Prop 允许外部环境传递数据给组件；
事件允许从组件内触发外部环境的副作用；
插槽允许外部环境将额外的内容组合在组件中。
7.关于slot（插槽）：
关于slot插槽的内容比较多，我们一点一点来学习，为了更好的理解slot的作用，我们一边写一个实例，一边来学习。现在我们要开发一个标题栏组件，在开发中，我们经常会自己做一个标题栏，用来显示页面标题
我们先来写titleBar这个组件的基本结构，现在它显示的标题是固定的，
在App.vue中使用它
现在我们的标题栏组件显示出来了，但是它显示固定内容，显然是不行的，我们需要把显示的标题变为动态，小伙伴们肯定想到了可以用之前学过的porps，从父组件向子组件传递数据的方式实现，
这节课我们要用slot这种方式，
修改titleBar文件的内容，增加<slot></slot>标签
slot中文翻译为插槽，我们可以理解为<slot></slot>标签在这里是一个槽，占了一个位置，等待父组件的内容插入进来
那我们来修改一下父组件的内容
我们看到父组件把内容插入进来的方式是在标签里写上内容，跟原生标签插入内容的方式是一样的
我们看一下最后渲染出来的html的内容
我们看到<title-bar></title-bar>标签里的内容放到里<slot></slot>标签所占的位置
使用slot比使用props更强大的特点有一点就是slot可以直接插入html，比如
渲染html的结果
我们看到span标签占据了原来slot的位置
显示效果：
这就是slot最基本的用法了，简单来说就是在子组件中留个位置，在父组件中，写在标签内部的内容就会传递过来，占上空位。
我们titleBar这个组件在不用页面使用的时候，只要在标签里面写上相应的页面名称就行了
在使用titleBar时，内容并没有给它传递内容
这时当然就不显示内容了
如果你需要在插槽没有插入内容时，显示默认值，那就需要把默认值写在slot标签里面，
我们来修改titleBar的内容
这样，就可以显示一个默认值了
这节课重点主要在于理解slot起到了一个占位作用，父组件调用时，把标签里面的内容放到slot的位置。
