vue插槽slot--基本插槽/具名插槽/作用域插槽

插槽的作用：为了让组件具有可扩展性。

基本插槽的使用：

在自定义的组件中使用。可以在插槽内填入默认内容。
在引用组件时，可以在组件内直接填入内容。就可以替换子组件内插槽的默认内容。

具名插槽的使用：

一个组件内可能存在多个插槽，当引用组件时，可能只希望替换其中某一个插槽的内容。这时候就可以使用具名插槽。即给每个slot一个特有的name属性值。

在子组件中使用多个slot为父组件引用子组件预留多个自定义空间：

<slot name="left"></slot>
<slot name="center"></slot>
<slot name="right"></slot>

在父组件中引用子组件时：

<son>
	<div slot="center">我要把son组件内的center插槽内容替换掉</div>
</son>

作用域插槽的使用：

有个需求：子组件中包含一个数组数据。需要在不同的位置进行展示。有的地方水平展示，有点地方纵列展示，有的位置直接显示一个数组。希望父组件告知子组件具体如何展示。

以上需求就可以使用作用域插槽。展示数据由子组件提供。但展示方式由父组件决定。
所以需要先在父组件中拿到子组件的数据：

1. 在子组件中将子组件的数据绑定到abc： [abc可以随意更改成你喜欢的名字]
   在son组件中：

<div>
    <slot :abc="sondata">
        子组件默认展示
    </slot>
</div>

2. 在父组件中引用子组件son时，使用<template slot-scope="slot"></template>拿到子组件数据：

<son>
    <template slot-scope="slot">
        <span v-for="item in slot.abc"></span>  //slot.abc就是从子组件获取到的数据
    </template>
</son>