主要观点总结
文章主要介绍了在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
………………………………