Vue里的插槽slot_slot pig-CSDN博客

本文链接：https://blog.csdn.net/qq_40733968/article/details/125121470

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

前言

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

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

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

在这里插入图片描述

app.vue:
Category.vue:
在这里插入图片描述

现在需求改变：

在这里插入图片描述
如果不使用插槽怎么写？

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

app.vue
在这里插入图片描述
Category.vue:

解开游戏和电影

app.vue
在这里插入图片描述
Category.vue:

在这里插入图片描述

App.vue
在这里插入图片描述

Category.vue:
在这里插入图片描述
效果：

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

在这里插入图片描述

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

传统写法

在这里插入图片描述

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

在这里插入图片描述

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

app.vue:

在这里插入图片描述
Category.vue:

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

在这里插入图片描述
app.vue：

Category.vue:
在这里插入图片描述
效果：

在这里插入图片描述

在这里插入图片描述

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

在这里插入图片描述