VUE组件开发之 - slot

vue插槽的实现分为三类

1. slot - 单个插槽
2. slot-name - 具名插槽
3. slot-scope - 作用域插槽

由于官网篇幅过多，在这里只做简单的描述，希望能帮助大家快速理解。
首先，分析单个插槽 - slot

slot

• 在组件开发中，我们不应该融入过多的业务，因此，它应该是具备强扩展性的，简洁的代码，所以我们在开发过程当中，很容易的在一个组件里放入一个slot标签，如下：

<!-- hello.vue -->
<template>
  <div class="container">
    <header>hello</header>
    <slot>我是默认填充，在父组件不填充其他子元素时显示</slot>
  </div>
</template>

在父组件中使用

<hello>
  <h1>I’am slot</h1>
</hello>

这就是一个简单的例子，接下来分析具名插槽，再介绍两者的区别

slot-name

• 之所有具名插槽，我想是因为单个插槽的拓展性有一定限制，因此，在给每个slot定义一个name属性，让他们在父组件匹配到相同名称的slot时，放置相应的位置，组件开发思路就很清晰明了了，如下：

<!-- hello.vue -->
<template>
   <div class="container">
     <header>hello</header>
     <main>
       <slot name="main"></slot>
     </main>
     <footer>
       <slot name="footer"></slot>
     </footer>		
   </div>
</template>

在父组件中使用

<hello>
  <p slot="main">I’am main</p>
  <h1 slot="footer">I’am footer</h1>
</hello>

具名插槽的出现打破了单个插槽的使用限制，实现一个扩展性更强的组件接口，接下来开始分析作用域插槽，这个部分对于刚入门来说相对其他两种方式还是难理解一些，起码半年前我刚开始学习vue的时候是这样的，所以不懂的话可以多做一些项目增加对vue的项目经验再回头看，可能会更容易理解。

slot-scope

• 作用域插槽，顾名思义，就是在组件作用域当中，可以根据独立于不同的待办内容进行不同的输出，比如：

<!-- hello.vue -->
<template>
  <ul>
    <li v-for="todo in todos" v-key="{{todo.id}}">
      <slot :todo="todo">
        {{todo.text}}
      </slot>
    </li>
  </ul>
</template>

父组件引用

<hello :todos="todos">
  <template slot-scope="scope">
    <span v-if="scope.todo.id == 2">
      {{scope.todo.id}}
    </span>
  </template>
</hello>

在2.5.0+不限制template元素上，在这个例子当中，当待办项id为2时，它输出的就不是text了，而是输出它的id值