<!--
内容分发
1， 两个特点
组件不知道自己要挂载的内容是什么
组件可能有自己的模板
组件是由：
props 传递参数
events 触发事件
slot 内容分发
构成
编译的作用域：
父组件的模板内容是在父组件作用域内编译，
子组件模板内容是在子组件作用域内编译
<child-component> {{message}}</child-component> // message是父组件的数据
slot分发的内容，作用域是在父组件上
单个Slot的作用
具名Slot
给slot元素指定一个name后可以分发多个内容.
具名Slot可以与单个Slot共存
访问Slot
vue 1.0 不考虑了
vue 2.0 提供了$slots
-->
单个Slot
<one-slot>
<h3>{{fatherSlot}}</h3>
</one-slot>
// one-slot.vue
<slot>
<!--
子组件slot内的备用内容，它的作用域是子组件本身
-->
<p>如果父组件没有传入的内容，我就是默认出现的内容</p>
</slot>
具名Slot
<named-slot>
<div slot="title">title</div>
<div>container</div>
<div slot="footer">footer</div>
</named-slot>
// named-slot.vue
<div>
<h3>具名插槽</h3>
<!--
如果没有指定默认的匿名slot。父组件多余的内容片断都将被抛弃
-->
<slot name="title"></slot>
<slot></slot>
<slot name="footer"></slot>
</div>
作用域Slot
<!--
作用域插槽是一种特殊的slot.使用一个可以复用的模板替换已渲染的元素
作用域插槽更具代表性的用例是列表组件，允许组件自定义如何渲染列表中的每一项
作用域插槽的作用是：既可以复用子组件的slot，又可以使slot内容不一样。
-->
<scop-slot :books="books">
<!-- <template scope="args"> since 2.5之后被替换了 -->
<template slot-scope="args">
<!--
args 相当于是个临时变量，template可以通过临时变量args,
来访问子组件插槽的数据
-->
<div>
<p>来自父组件的内容</p>
<p>{{args.msg}}</p>
<p>来自子组件的当前毫秒数:{{args.nowDate}}</p>
</div>
</template>
<template slot-scope="props" slot="book">
<li>
<!--
li的内容渲染权由使用者掌握， 数据在子组件内获取
-->
<span>父组件</span>
<span>子组件:{{props.bookName.name}}</span>
</li>
</template>
</scop-slot>
// scop-slot.vue
<slot msg="来自子组件的内容":nowDate="nowDate"></slot>
<ul>
<slot name="book" v-for="book in books" :book-name="book"></slot>
</ul>