<!--
内容分发
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
>