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

按钮

呵呵呵

我是DIV元素

我是段落

我是key

我是内容

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

---

具名插槽slot

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

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

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

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

• 如何使用具名插槽呢？

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

演示

---

标题

返回

更多

左边

中间

右边

作用域插槽

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

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

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

样例需求

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

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

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

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

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

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

• 利用slot作用域插槽

//这里的solt只是一个名字

{{item}}——

{{slot.data.join(‘——’)}}

//把子组件的数据绑在slot上

• {{item}}

• ---

  文末

  逆水行舟不进则退，所以大家要有危机意识。

  同样是干到35岁，普通人写业务代码划水，榜样们深度学习拓宽视野晋升管理。

  这也是为什么大家都说35岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。

  为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师核心知识笔记》电子稿文件。

  内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。

  269页《前端大厂面试宝典》

  包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

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

  

  前端面试题汇总