一文详解Vue插槽slot的使用与案例展示，看完就彻底明白了

子组件的代码：

我是子组件

我是默认插槽,当父组件不填充任何内容时,我这句话才会出现

启动项目，在浏览器中显示：

这时候，我们已经使用 slot ，在子组件中占了一个坑，但是我们还没有填充内容，接下来填充内容：

可以看到，填充的内容，确实在子组件中显示

假如，我们去掉子组件的插槽，父组件在子组件填充的内容还能看到吗？我们来试一试：

可以看到：浏览器中，只显示两个组件原本的信息，父组件填充的内容是看不到的。

在 slot 中，不仅可以填充文字，也可以填充图片、视频、HTML结构等，如填充图片：

浏览器中显示如下：

2.具名插槽

具名插槽，顾名思义，就是带有名字的插槽，具有 name 属性，一个不带 name 的 <slot> 会带有默认的名字 default 。

在子组件中，slot 指定 name 属性

我是子组件

我是插槽默认的内容,当父组件不填充任何内容时,我这句话才会出现

在父组件中，需要使用 template ，在 template 模板中，指定 slot 在子组件中的 name 值

我是父组件

这是父组件在子组件中填充的内容，在子组件中显示

浏览器可以正常显示填充的内容：

假如，我们在父组件中，只写了 template ，并没有指定 slot 在子组件中的 name 值，

那么，浏览器中：

也就是说，在引用子组件的代码中， template 中的slot 是根据等号 = 后面的值，来寻找对应的插槽 slot ，从而在对应的位置上，填充相应的内容。当我们使用的插槽数量比较多时，具名插槽就有很大的实用性。

3.作用域插槽

如果数据在子组件，可以在子组件中直接使用数据，但根据数据生成的结构需要组件的使用者来决定，我们就需要用到作用域插槽，同时，我们也可以实现多种结构。

例如：games数据在子组件中，但使用数据所遍历出来的结构由父组件App决定

子组件中，使用 指明使用什么数据，并将数据传给插槽的使用者

我是子组件

{{title}}

我是插槽默认的内容,当父组件不填充任何内容时,我这句话才会出现

在父组件中，使用子组件通过插槽传递过来的数据，渲染结构，有3种形式：

我是父组件

• {{g}}

• 自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

  深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

  因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

  

  

  既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

  

  由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

  如果你觉得这些内容对你有帮助，可以扫码获取！！（资料价值较高，非无偿）

  

  最后

  整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。

  《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》PDF完整版点击这里即可获取！！！！

  

  

  

  于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！**

  如果你觉得这些内容对你有帮助，可以扫码获取！！（资料价值较高，非无偿）

  

  最后

  整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。

  《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》PDF完整版点击这里即可获取！！！！

  [外链图片转存中…(img-MrkvA7UK-1711659729541)]

  [外链图片转存中…(img-djoBWnO5-1711659729541)]

  [外链图片转存中…(img-TgAQfEyc-1711659729542)]