一、默认插槽需求
![](https://img-blog.csdnimg.cn/direct/f3f74beeb67a423c9e8968ccbf7fa822.png)
1-1、原本的写法:
![](https://img-blog.csdnimg.cn/direct/b139805d29ad410c8a5264b8311669a5.png)
在每个category组件中用v-show来做条件渲染,但是不方便!
1-2、默认插槽
![](https://img-blog.csdnimg.cn/direct/201b1435989d4ab7b4d0ec2fdd26a1b8.png)
![](https://img-blog.csdnimg.cn/direct/b05f1c24b8364b49977ed915ac9b213b.png)
![](https://img-blog.csdnimg.cn/direct/a0c2edbc7f3247cbb46a689da66df9da.png)
img标签,ul标签,video标签,都是在app组件中完成解析之后,塞到category组件中的,所以,他们对应的样式可以都写在app组件中!此时,解析完的结构带着样式塞进组件中;
当然也可以写在category组件中,此时,解析完的结构没有样式,塞到组件中再渲染样式!
二、具名插槽需求
![](https://img-blog.csdnimg.cn/direct/15b99339e31049fca99fa907200d1288.png)
组件中有多个插槽
2-1、具名插槽
![](https://img-blog.csdnimg.cn/direct/d23355beacfc42b380cd684925c9960d.png)
![](https://img-blog.csdnimg.cn/direct/47355e446dd04635863489e14dc1a00e.png)
2-2、需求优化
![](https://img-blog.csdnimg.cn/direct/9cb5b01caa8e42419bb82c94d6922428.png)
![](https://img-blog.csdnimg.cn/direct/6857f092814240a998b356a726ac897f.png)
或者:
![](https://img-blog.csdnimg.cn/direct/401bd0a6c1894876a1005466f6df3537.png)
或者:
![](https://img-blog.csdnimg.cn/direct/b0b947f7897849aab82ed4e3a9f0fa62.png)
<template>标签,可以像div一样包裹元素,但是,最终不生成真实的DOM元素。
当写了<template>标签,slot就有了新的写法:
![](https://img-blog.csdnimg.cn/direct/0de91cb15be94f35b62527ba4fc012dc.png)
![](https://img-blog.csdnimg.cn/direct/2578e9fdba5845de90004e900368546f.png)
三、作用域插槽
![](https://img-blog.csdnimg.cn/direct/6ac749547c4d49e0b6a1dbd6173b9893.png)
![](https://img-blog.csdnimg.cn/direct/661bb95d7eb94fabb36d0506ce0a13a5.png)
数据不变,但是根据数据所生成的结构变化。结构由使用者决定(app组件)
因为三个组件的数据都是一样的,所以,将数据放到category组件中:
![](https://img-blog.csdnimg.cn/direct/c3d1de5e45804886ab697fc6817ea405.png)
但是,插槽中的样式是由app组件负责的,需要将category组件中的数据games传给app组件
![](https://img-blog.csdnimg.cn/direct/b4ce7b1646b4471c94ca66a90dc332b4.png)
谁往插槽中塞结构,插槽就把数据传给谁
![](https://img-blog.csdnimg.cn/direct/bbba1b448e8947f2b07af7fec6e983ec.png)
注意:atguigu收到的是一个对象,因为这样,可以传多个值:
总是atguigu.xxxx比较烦,可以用解构赋值:
或者,scope也可以有另一种写法:
四、小结
![](https://img-blog.csdnimg.cn/direct/d4a4e3e346784c1096f86a1d2b30caaf.png)
![](https://img-blog.csdnimg.cn/direct/59eba63c7d5c4f4db9baef105fb5f8bd.png)
![](https://img-blog.csdnimg.cn/direct/121d233796c54edaba73092224bab6b2.png)
![](https://img-blog.csdnimg.cn/direct/f87d7ddef69c407badf6936eee35971e.png)
作用域插槽也能有名字name!