Vue里的插槽slot

提示：本文主要对Vue里的插槽进行总结

---

前言

提示：这里可以添加本文要记录的大概内容：

本文主要对Vue里的插槽进行总结

---

提示：以下是本篇文章正文内容

一、引入插槽

1.1 实现效果

1.2 不使用插槽

app.vue:
Category.vue:

二、默认插槽

2.1 需求变更

现在需求改变：

如果不使用插槽怎么写？

只做了一个模块，加了v-show条件渲染
现在只有两个分类，但是如果有十个或者更多呢？

2.2 正确写法

app.vue

Category.vue:

解开游戏和电影

app.vue

Category.vue:

三、具名插槽

3.1 实现效果

3.2 具体实现

App.vue

Category.vue:

效果：

3.3 需求变更

在电影类，下方加一个'欢迎前来观影'

但是这样无缘无故多了一层div
如何解决？
使用template
一旦使用了template，插槽就有第二种写法，vue2.6提出来的

3.4 template的使用

传统写法

vue2.6提出来的提出了的新写法

四、作用域插槽

4.1 简单实现

数据不放在app.vue里，而是放在Category.vue里
可以直接用插槽实现

app.vue:

Category.vue:

4.2 新增需求

第一次游戏分类 为无序列表
第二次游戏分类 为有序列表
第三次游戏分类 为h4标题

app.vue：

Category.vue:

效果：

4.3 使用slot-scope

五、总结插槽

补充：作用域插槽也可以有名字