【原创】Vue 插槽

插槽的作用

让父组件可以向子组件插入 HTML 结构，也是一种组件间的通讯方式，适用于父组件===>子组件。

插槽的分类

• 默认插槽

// 父组件中
<Category>
<div>html 结构</div>
</Category>

// 子组件中
<template>
<div>
<!-- 定义插槽-->
<slot>插槽的默认内容</slot>
</div>
</template>

• 具名插槽（有名字）

// 父组件中
<Category>
<template slot="center">
<div>html 结构1</div>
</template>

<template v-slot:footer>
<div>html 结构2</div>
</template>
</Category>

// 子组件中
<template>
<div>
<!-- 定义插槽-->
<slot name="center">插槽的默认内容</slot>
<slot name="footer">插槽的默认内容</slot>
</div>
</template>

• 作用域插槽

数据在组件的自身，但根据生成的结构需要组件的使用者来决定。（games 数据在 Category 组件自身，但使用 games 数据遍历出来的结构由 APP 组件决定）

// 父组件
<Category>
<template scope="scopeData">
<ul>
<li v-for="g in scopeData.games" key="g.id">{{g.name}}</li>
</ul>
</template>
</Category>
// 子组件
<slot :games='games'></slot>