Vue 插槽slot的使用(具名插槽、作用域插槽)

• 因此，isShow使用的是Vue实例中的属性，而不是子组件的属性。

为什么使用slot

• slot翻译为插槽

• 在生活中很多地方都有插槽，电脑的USB插槽，插板当中的电源插槽

• 插槽的目的是让我们原来的设备具有更多的扩展性

• 比如电脑的USB我们可以插入U盘，硬盘，手机，音响，键盘，鼠标等

• 组件的插槽

• 组件的插槽也是为了让我们封装的组件更具有扩展性

• 让使用者可以决定组件内部的一些内容到底展示什么

• 例子：移动网站中的导航栏

• 移动开发中，几乎每个页面都有导航栏

• 导航栏我们必然会封装成一个插件，比如nav-bar组件

• 一旦有了这个组件，我们就可以在多个页面中复用

如何封装这类组件呢？ slot

• 如何去封装这类的组件呢？

• 它们也很多区别，但是也有很多共性。

• 如果，我们每一个单独去封装一个组件，显然不合适：比如每个页面都返回，这部分内容我们就要重复去封装。

• 但是，如果我们封装成一个，好像也不合理：有些左侧是菜单，有些是返回，有些中间是搜索，有些是文字，等等。

• 如何封装合适呢？抽取共性，保留不同。

• 最好的封装方式就是将共性抽取到组件中，将不同暴露为插槽。

• 一旦我们预留了插槽，就可以让使用者根据自己的需求，决定插槽中插入什么内容。

• 是搜索框，还是文字，还是菜单。由调用者自己来决定。

slot的基本使用

• 了解了为什么用slot，我们再来谈谈如何使用slot？

• 在子组件中，使用特殊的元素就可以为子组件开启一个插槽。

• 该插槽插入什么内容取决于父组件如何使用。

• 我们通过一个简单的例子，来给子组件定义一个插槽：

• <slot>中的内容表示，如果没有在该组件中插入任何其他内容，就默认显示该内容

按钮

呵呵呵

我是DIV元素

我是段落

我是key

我是内容

我是默认内容，如果没有插入东西，就会显示我

---

具名插槽slot

• 当子组件的功能复杂时，子组件的插槽可能并非是一个。

• 比如我们封装一个导航栏的子组件，可能就需要三个插槽，分别代表左边、中间、右边。

• 那么，外面在给插槽插入内容时，如何区分插入的是哪一个呢？

这个时候，我们就需要给插槽起一个名字

• 如何使用具名插槽呢？

• 非常简单，只要给slot元素一个name属性即可

演示

---

标题

返回

更多

左边

中间

右边

作用域插槽

• 作用域插槽是slot一个比较难理解的点，而且官方文档说的又有点不清晰。

• 这里，我们用一句话对其做一个总结，然后我们在后续的案例中来体会：

• 父组件替换插槽的标签，但是内容由子组件来提供。

样例需求

• 子组件中包含一组数据，比如：pLanguages：[‘JavaScript’,‘Python’,‘Swift’,‘Go’,‘C++’]

最后

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

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

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

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

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