深度理解slot

序言：slot是创建组件复用的强大工具，尽管不是很容易理解，我们来看一看slot是什么以及如何在应用中使用它。

1、什么是slot？

slot是vue组件的一种机制，允许你以严格父子关系以外的方式组合组件。slot为你提供了将内容放置在新位置或使组件更加通用。理解它们最好的办法就是通过实践，我们以一个最简单的例子开始：

<template>
  <div>
    <component-b>hello world</component-b>
  </div>
</template>

<script>
  import vue from 'vue'

  const ComponentB = vue.component('component-b', {
    template:`
      <div><slot></slot></div>
    `
  });
  
  export default {
    data() {
      return {

      }
    },
    components: {
      ComponentB
    }
  }
</script>

运行结果；

我们可以看到<component-b>标签里面的内容将会替换slot标签，这就是所谓的内容分发，slot标签起到的就是这个作用。

2、后备内容

后备内容是指当你没有指定分发内容时，可以给slot指定一个内容。

<template>
  <div>
    <component-b>指定的分发内容</component-b>
    <component-b></component-b>
  </div>
</template>

<script>
  import vue from 'vue'

  const ComponentB = vue.component('component-b', {
    template:`
      <div><slot>我是一个默认值</slot></div>
    `
  });
  
  export default {
    data() {
      return {

      }
    },
    components: {
      ComponentB
    }
  }
</script>

运行结果：

3、多个具名插槽

您可以向组件添加多个插槽，但如果这样做，则除了其中一个插槽之外的所有插槽都需要具有名称。如果没有名称，则为默认插槽。以下是创建多个插槽的方法：

<template>
  <div>
    <component-b>
      <template v-slot:top>我是顶部</template>
      <p>我是主体一</p>
      <p>我是主题二</p>
      <template v-slot:bottom>我是底部</template>
    </component-b>
  </div>
</template>

<script>
  import vue from 'vue'

  const ComponentB = vue.component('component-b', {
    template:`
      <div>
        <slot name="top"></slot>
        <slot></slot>
        <slot name="bottom"></slot>
      </div>
    `
  });
  
  export default {
    data() {
      return {

      }
    },
    components: {
      ComponentB
    }
  }
</script>

运行结果：

4、插槽作用域

举个例子，比如我写了一个可以实现条纹相间的列表组件，发布后，使用者可以自定义每一行的内容或样式（普通的slot就可以完成这个工作）。而作用域插槽的关键之处就在于，父组件能接收来自子组件的slot传递过来的参数，具体看案例和注释。

<template>
  <div>
    <component-b :items="user" oddBackgroudColor="#D3DCE6" evenBackgroudColor="#E5E9F2">
      <template v-slot:list="props">
        /*通过props对象接收子组件插槽传过来的参数*/
        <span>{{user[props.$index].id}}</span>
        <span>{{user[props.$index].name}}</span>
        <span>{{user[props.$index].age}}</span>
      </template>
    </component-b>
  </div>
</template>

<script>
  import vue from 'vue'

  const ComponentB = vue.component('component-b', {
    data() {
      return {

      }
    },
    template:`
      <ul>
        <li v-for="(item, index) in items" style="line-height:2.2;list-style-type:none" :style="index % 2 === 0?'background-color:' + oddBackgroudColor:'background-color:' + evenBackgroudColor">
          /*slot的$index可以传递到父组件中*/
          <slot name="list" :$index="index"></slot>
        </li>
      </ul>
    `,
    props:{
      items:Array,
      oddBackgroudColor:String,
      evenBackgroudColor:String
    }
  });
  
  export default {
    data() {
      return {
        "user":[
          {id: 1, name: '张三', age: 20},
          {id: 2, name: '李四', age: 22},
          {id: 3, name: '王五', age: 27},
          {id: 4, name: '张龙', age: 27},
          {id: 5, name: '赵虎', age: 27}
        ]
      }
    },
    components: {
      ComponentB
    }
  }
</script>