专栏名称: 奇舞精选
《奇舞精选》是由奇舞团维护的前端技术公众号。除周五外,每天向大家推荐一篇前端相关技术文章,每周五向大家推送汇总周刊内容。
今天看啥  ›  专栏  ›  奇舞精选

无意中发现 Vue3 的小技巧,帮我节省很多代码

奇舞精选  · 公众号  ·  · 2024-08-12 18:00

主要观点总结

文章主要介绍了在Vue3项目中发现的一个小技巧:组件的事件可以往下传递并进行叠加,这有助于简化代码和提高开发效率。作者通过实例详细解释了这一技巧的应用场景和实现方法,并从Vben-Admin项目中汲取了灵感。

关键观点总结

关键观点1: 发现Vue3组件事件传递的小技巧

作者在开发过程中偶然发现了Vue3组件的事件可以往下传递并进行叠加,这有助于减少代码量和提高开发效率。

关键观点2: 通过实例讲解事件叠加技巧的应用

作者通过祖孙三个组件(Sunzi.vue、Erzi.vue和Yeye.vue)的例子,详细解释了事件叠加技巧的应用,帮助读者更好地理解这一技巧。

关键观点3: 从Vben-Admin项目中汲取灵感

作者提到Vben-Admin项目大量使用了事件叠加的技巧,尤其是Table、Drawer、Modal等可控组件,从中学到了很多技巧。

关键观点4: 对初始代码进行了优化

作者利用发现的小技巧对初始代码进行了优化,通过封装Hooks简化了代码,提高了开发效率。


文章预览

无意中发现 Vue3 的小技巧,帮我节省很多代码 前言 大家好,我是林三心,用最通俗易懂的话讲最难的知识点是我的座右铭,基础是进阶的前提是我的初心~ 最近在开发 Vue3 项目时偶然发现了一个技巧: 组件的事件往下传可以进行叠加! ,感觉对大家的开发肯定有帮助,能节省很多代码量!!!我会通过一个小案例来跟大家讲解这个小技巧的好处体现在哪~ 场景 先来说说我的场景吧,我在项目开发中对一个基础组件  BasicComp.vue 进行二次封装,总共封装了两层,如下图 我先把  BasicComp.vue  简单化一下: 而我想要做的效果是在  Page.vue、Index.vue 中都能调用 BasicComp.vue 身上的方法 changeShow 去控制 show 变量的改变,比如下面的效果 实现代码如下: SecondComp.vue Index.vue Page.vue 太麻烦了! 大家也看到了,上面的代码实现非常麻烦,得一层一层利用  emits   ………………………………

原文地址:访问原文地址
快照地址: 访问文章快照
总结与预览地址:访问总结与预览