VUE插槽

插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot>表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。
简化：子组件中留下个“坑”，父组件可以使用指定内容来补“坑”。  
A组件中插入B组件。

（1）匿名插槽

语法：<slot></slot>  
a.没有为插槽指定名称；  
b.通过slot标签可以添加匿名插槽；  
c.在使用组件的时候，组件中的内容会填充到所有匿名插槽的位置，所以在封装组件的时候，匿名插槽一般只有一个；  
d.匿名插槽可以设置默认的内容，如果没有传入内容就使用默认内容，如果传入了，就会进行覆盖。  
<div>         <!-- 添加匿名插槽 -->         <slot>匿名插槽</slot>     </div>

（2）具名插槽

语法：<slot name="名称"></slot>  
1.为slot设置名字的插槽就称为具名插槽；  
2.一个封装组件中可以有多个具名插槽；  
3.使用：通过template标签指定内容所放置的插槽名称；  
4.使用简写：v-slot:名字 或者 #名字。

slot元素有一个特殊的 attribute：name。这个 attribute 可以用来定义额外的插槽：

    <template>           <div>             <header>                   <slot name="header"></slot>             </header>             <main>                   <slot></slot>             </main>             <footer>                   <slot name="footer"></slot>             </footer>           </div>     </template>
一个不带name的slot出口会带有隐含的名字“default”。  

在向具名插槽提供内容的时候，可以在一个template元素上使用slot指令，并以slot的参数的形式提供其名称（也可以直接放在标签中，例如<div slot="header">）：

    <template>           <div>             <p>我是A组件</p>             <B>                   <template slot="header">                     <p>我是header部分</p>                  </template>                     <p>我是main（默认插槽）部分</p>                     <template slot="footer">                     <p>我是footer部分</p>                   </template>             </B>           </div>     </template>
template元素中的所有内容都将会被传入相应的插槽。任何没有被包裹在带有slot的template中的内容都会被视为默认插槽的内容。

（3）作用域插槽

有时让插槽内容能够访问子组件中才有的数据是很有用的。