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

如何封装这类组件呢？ slot

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

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

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

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

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

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

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

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

slot的基本使用

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

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

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

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

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

按钮

呵呵呵

我是DIV元素

我是段落

我是key

我是内容

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

---

具名插槽slot

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

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

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

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

• 如何使用具名插槽呢？

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

演示

---

标题

返回

更多

左边

中间

右边

作用域插槽

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

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

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

样例需求

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

• 需要在多个页面进行展示

• 某些页面是以水平方向一一展示的

• 某些界面是以列表形式展示的

• 某些界面直接展开一个数组

• 内容在子组件，希望父组件告诉我们如何展示，怎么办呢？

• 利用slot作用域插槽

刷面试题

刷题的重要性，不用多说。对于应届生或工作年限不长的人来说，刷面试题一方面能够尽可能地快速自己对某个技术点的理解，另一方面在面试时，有一定几率被问到相同或相似题，另外或多或少也能够为自己面试增加一些自信心，可见适当的刷题是很有必要的。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 前端字节跳动真题解析

  

• 【269页】前端大厂面试题宝典

  

最后平时要进行自我分析与评价，做好职业规划，不断摸索，提高自己的编程能力和抽象思维能力。大厂面试远没有我们想的那么困难，摆好心态，做好准备，你也可以的。