前言 插槽可以说是 Vue 中非常重要的一部分吧，在我学习和练习的过程中，当组件搭配着插槽一起使用的时候，会发挥的更好一些。更多时候也会更加方便。
今天介绍Vue中三种插槽吧：默认插槽、具名插槽、作用域插槽。
环境准备 先搭个初始环境给大家看看哈。一步一步讲完这个插槽。
就是写了一个类别组件，分别渲染这三种数据。

文章图片

Category组件

.category{ width: 200px; height: 300px; background-color:pink; }

App组件

#app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; display: flex; justify-content: space-between; }

最开始就是如上图一样的需求，但是现在业务需求更改了，电影变成了只宣传其中一个，其他的不进行宣传，吃的也变成只宣传一个拉。
如下图：

文章图片

我们怎么改合适呢？
是在Category组件中加if一个个进行判断吗？还是有更好的方法勒？？？
一个个判断是不行的，那样子代码会变得十分繁杂，不易阅读，万一以后又要更改业务需求，代码都不好动。
接下来就到默认插槽的出现拉。
一、默认插槽 我们在子组件中不用再用props 接收数据，也不做渲染，而是定义一个插槽。

App组件也作出更改

显示效果：

文章图片

解释：
我们在子组件写了一个如果当父组件不传值过来，即显示此默认 标签，此处就相当于占了一个位置。
我们在父组件中，也不再像之前一样写自闭和标签，而是写了非自闭和标签 内容 。这样做，Vue就会默认的将写在组件标签中的内容渲染完，然后再放回子组件中的 占好位置的地方去。
注意:CSS样式写在父组件或者子组件中都是可以的，因为它是渲染完后才放回子组件中的。写在子组件中，就是在放回子组件中时渲染。
写完这里，客户突然觉得你们这么厉害，不满足啦，又开始给你们整幺蛾子。

文章图片

接下来就又到具名插槽登场啦哈。
二、具名插槽 竟然我们能够想到用一个插槽啦，那么为什么不能想着用两个插槽来试一试勒？
改造子组件

父组件

效果展示

文章图片

解释：
我们可以在组件中放多个slot，但是多个的时候必须要给他们命名，另外父组件中也要进行指定，这样才不会放不进去。
三、作用域插槽 作用域插槽和前面稍稍有点不同，之前都是数据在父组件中，而作用域插槽是数据在子组件中，反过来传递给父组件，让父组件定义结构进行渲染。
改造的子组件

父组件

效果图

文章图片

这种我在学习及练习过程中，并没有想到哪些使用场景，但是在官网上有案例，我想它必定是有存在的理由，只是我的见识太少，而未能利用到而已。
解释：
子组件中通过:变量名="定义的数据" 向父组件传值，父组件用