Vue从零开始总结31

组件化开发是活的，那么我们如何把代码写活呢？如果后续有功能想添加到现有组件上我们又如何是好？

一台电脑，有多个插孔用于拓展，都是在原有基础上进行了功能的拓展，甚至可以进行升级，那么同理，我们的代码也可以这样。

这时候就轮到我们的slot插槽出场了

它呢是写在组件模板内的，分为普通插槽，具名插槽和作用域插槽，三者都可以设置默认内容，在使用的时候，在它的标签内部插入内容。

普通插槽：

<template id="son">
 <div>
   <h2>插槽的使用</h2>
   <slot><span>我是插槽</span></slot>//设立插槽，并添加默认内容
 </div>
</template>

<div id="app">
 <cpn></cpn>
</div>

插入内容后：

<div id="app">
 <cpn>
   <p>我是一号，插进来了</p> //标签内部插入内容

   <p>我是二号，插进来了</p>
   <p>我是三号，插进来了</p>
 </cpn>
</div>

我们发现插入的内容作为一个整体覆盖了默认内容

具名插槽：为每个插槽赋予名字。

@当不进行任何操作，仅仅赋名时

<template id="son">
 <div>
   <h2>插槽的使用</h2>
   <slot name="one"><span>我是插槽1</span></slot>
   <slot name="two"><span>我是插槽2</span></slot>
   <slot name="three"><span>我是插槽3</span></slot>
 </div>
</template>

<div id="app">
 <cpn>
   <p>我是一号，插进来了</p>//具名函数就算插入内容，也会显示默认内容
   <p>我是二号，插进来了</p>
   <p>我是三号，插进来了</p>
 </cpn>
</div>

@当为组件标签内容指定slot名字时

作用域插槽：在模板插槽内动态设定一个变量用来存放子组件内指定数据。然后在子组件标签内部，通过模板，指定作用域，通过这个作用域，拿到我们的数据。

data(){
 return {
   message:'子组件中的数据',
   movies:['海贼','火影','海王','喜羊羊']
 }

<template id="son">
 <div>
   <slot :slotdata="movies"></slot>//动态设定变量，接收子组件内部movies数据
 </div>
</template>

<div id="app">
 <cpn>
   <template slot-scope="slot">//在子组件标签内部，通过模板，指定作用域

     <span>
       {{slot.slotdata}}//通过这个作用域，拿到我们的数据

     </span>
   </template>
 </cpn>
</div>