vue作用域插槽，你真的懂了吗？

我在这放个span，乐意的话，放个组件都行

1. 给slot传入普通文本

2. 给slot传入了一个图像处理组件

• 具名插槽也很简单，比如有多个插槽，我作为父组件，肯定想区别子组件中的几个插槽，那就要用slot标签的name属性来标识了，而父组件要决定在什么插槽里面放什么内容，就要将name的值赋值给slot属性传递给对应的插槽。如果slot没有name属性，就是匿名插槽了，而父组件中不指定slot属性的内容，就会被丢到匿名插槽中。

// 子组件

这里放标题

这里放作者

这里放文章内容

// 父组件

vue作用域插槽，你真的懂了吗？

好像有点懂了

王五

• 最难理解的是作用域插槽。看了文档说明的朋友可能还会有点晕，大概是说在作用域插槽内，父组件可以拿到子组件的数据。子组件可以在slot标签上绑定属性值，如：

而父组件通过slot-scope绑定的对象下拿到nickName的值。

{{scope.nickName}}

这里大家应该都有疑问。这有什么用？我在子组件用$emit向父组件传递数据不就行了？

关于作用域插槽的一点理解

==============================================================================

我觉得要从组件之间的数据流向来思考作用域插槽的应用场景。

假设第一个场景，需要你写一个商品卡片组件，并通过循环去展示多个卡片，并且要求能响应每个卡片上的图片或者其他内容的点击事件而跳转到商品详情页，你会怎么写？

我会使用如下的处理方式，首先将商品卡片写成一个组件Commodity.vue，而在CommodityList.vue中用一个v-for来处理商品卡片列表的展示。

<commodity v-for=“(item,index) in commodities” @clickCommodity=“onCommodityClick”>

Commodity组件通过$emit像父组件传递clickCommodity事件，并携带商品数据，父组件即可在onCommodityClick方法中得到数据，进行业务处理，这样便完成了一个基本的由子到父的数据传递。

如果再往上抽象一下呢？比如我有多个运营栏目，像淘宝首页有“有好货”，“爱逛街”这样两个栏目，每个栏目下都需要有一个商品卡片列表，那么商品卡片列表CommodityList.vue就要抽成组件了。而这个包含多个运营栏目的vue组件我假设它叫ColumnList.vue，在其中通过v-for调用了CommodityList组件。

最后

小编的一位同事在校期间连续三年参加ACM-ICPC竞赛。从参赛开始，原计划每天刷一道算法题，实际上每天有时候不止一题，一年最终完成了 600+：

凭借三年刷题经验，他在校招中很快拿到了各大公司的offer。

入职前，他把他的刷题经验总结成1121页PDF书籍，作为礼物赠送给他的学弟学妹，希望同学们都能在最短时间内掌握校招常见的算法及解题思路。

整本书，我仔细看了一遍，作者非常细心地将常见核心算法题和汇总题拆分为4个章节。

而对于有时间的同学，作者还给出了他结合众多数据结构算法书籍，挑选出的一千多道题的解题思路和方法，以供有需要的同学慢慢研究。