vue组件之 - 插槽
写了半年多的vue项目，昨晚在回看render函数渲染时，发现函数式编写组件的代价是需要深入底层源码，由于时间有限，对template编写各类组件转化render时所需要的学习做了一些研究，今天根据项目经验以及官网的指导分享一下对插槽（slot）的理解，理解有误之处请谅解并及时指出，感谢。
vue官网的插槽实现分为三类
- slot - 单个插槽
- slot name - 具名插槽
- 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值