Vue Slot插槽

   

<!--

内容分发

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>