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

// 父组件

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组件。

注意：业务来了，我希望把点击商品卡片的业务放在ColumnList.vue中处理。你们想象一下要怎么做？一种土办法就是商品按钮点击时，Commodity组件$emit通知CommodityList.vue，而CommodityList接着把事件用$emit往上抛，那么ColumnList.vue就能处理这个点击事件了。这样做完全没有问题，但是显得子组件很不纯粹，跟业务都扯上关系了。

那么如何优雅地解决这个问题呢？这个时候，作用域插槽真正派上用场了。

通过作用域插槽将本应该由CommodityList处理的商品卡片点击业务onCommodityClick提升到ColumnList处理。

{{column.columnName}}

<commodity :modityData=“scope.row” @clickCommodity=“onCommodityClick(scope.row)”>

而CommodityList组件内部应该是改造成这样，slot接收来自父组件的商品卡片组件，这里面不涉及关于商品组件的业务，只关注其他业务和布局即可。最终就实现了组件和业务的剥离，这也是组件化的精髓所在吧。不知道有没有帮到您呢？

最后

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

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

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

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

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

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

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

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