# 前言一个页面有多个按钮，每个按钮都要添加loading效果，高级前端是如何在Vue3控制按钮是否显示loading效果的呢？ # 普通前端我们先来看看初级普通前端平常是怎么给按钮添加loading效果的： ```xml ``` 通过以上代码可以看到，一个页面有多个按钮，每个按钮都要添加loading效果，所以声明了loading1、loading2、loading3 ...变量来控制按钮是否显示loading效果，非常不优雅。那么高级前端是如何优雅的给按钮添加loading效果的呢？ # 高级前端首先先封装一个`MyButton`组件: ```xml ``` 接下来引用`MyButton`组件，绑定`click`事件，返回`Promise`就可以优雅的给按钮添加一个loading效果了 ```xml ``` ![loading-buttons (2).gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7656ad6d8fc64030b1e1a35e9eaa1139~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=393&h=129&s=26236&e=gif&f=26&b=1e1e1e) [相关源码](https://element-plus.run/#eyJzcmMvQXBwLnZ1ZSI6IjxzY3JpcHQgc2V0dXAgPlxuaW1wb3J0IE15QnV0dG9uIGZyb20gJy4vTXlCdXR0b24udnVlJztcbmNvbnN0IGFzeW5jRm4gPSAoKSA9PiBuZXcgUHJvbWlzZShyZXNvbHZlID0+IHtcbiAgc2V0VGltZW91dChyZXNvbHZlLCAzMDAwKVxufSlcblxuY29uc3QgaGFuZGxlcjEgPSBhc3luYyAoKSA9PiB7XG4gIC8vIC4uLlxuICBhd2FpdCBhc3luY0ZuKClcbn1cblxuXG5cbmNvbnN0IGhhbmRsZXIzID0gKCkgPT4ge1xuICAvLyAuLi5cbiAgcmV0dXJuIGFzeW5jRm4oKVxufVxuPC9zY3JpcHQ+XG5cbjx0ZW1wbGF0ZT5cbiAgPE15QnV0dG9uIHR5cGU9XCJwcmltYXJ5XCIgQGNsaWNrPVwiaGFuZGxlcjFcIj5cbiAgICDmjInpkq4xXG4gIDwvTXlCdXR0b24+XG4gIDxNeUJ1dHRvbiBAY2xpY2s9XCJhc3luY0ZuXCI+XG4gICAg5oyJ6ZKuMlxuICA8L015QnV0dG9uPlxuICA8TXlCdXR0b24gdHlwZT1cInByaW1hcnlcIiBwbGFpbiBAY2xpY2s9XCJoYW5kbGVyM1wiPlxuICAgIDx0ZW1wbGF0ZSAjbG9hZGluZz5cbiAgICAgIDxkaXYgY2xhc3M9XCJjdXN0b20tbG9hZGluZ1wiPlxuICAgICAgICA8c3ZnIGNsYXNzPVwiY2lyY3VsYXJcIiB2aWV3Qm94PVwiLTEwLCAtMTAsIDUwLCA1MFwiPlxuICAgICAgICAgIDxwYXRoIGNsYXNzPVwicGF0aFwiIGQ9XCJcbiAgICAgICAgICAgIE0gMzAgMTVcbiAgICAgICAgICAgIEwgMjggMTdcbiAgICAgICAgICAgIE0gMjUuNjEgMjUuNjFcbiAgICAgICAgICAgIEEgMTUgMTUsIDAsIDAsIDEsIDE1IDMwXG4gICAgICAgICAgICBBIDE1IDE1LCAwLCAxLCAxLCAyNy45OSA3LjVcbiAgICAgICAgICAgIEwgMTUgMTVcbiAgICAgICAgICBcIiBzdHlsZT1cInN0cm9rZS13aWR0aDogNHB4OyBmaWxsOiByZ2JhKDAsIDAsIDAsIDApXCIgLz5cbiAgICAgICAgPC9zdmc+XG4gICAgICA8L2Rpdj5cbiAgICA8L3RlbXBsYXRlPlxuICAgIOaMiemSrjNcbiAgPC9NeUJ1dHRvbj5cbjwvdGVtcGxhdGU+XG48c3R5bGUgc2NvcGVkPlxuLmVsLWJ1dHRvbiAuY3VzdG9tLWxvYWRpbmcgLmNpcmN1bGFyIHtcbiAgbWFyZ2luLXJpZ2h0OiA2cHg7XG4gIHdpZHRoOiAxOHB4O1xuICBoZWlnaHQ6IDE4cHg7XG4gIGFuaW1hdGlvbjogbG9hZGluZy1yb3RhdGUgMnMgbGluZWFyIGluZmluaXRlO1xufVxuXG4uZWwtYnV0dG9uIC5jdXN0b20tbG9hZGluZyAuY2lyY3VsYXIgLnBhdGgge1xuICBhbmltYXRpb246IGxvYWRpbmctZGFzaCAxLjVzIGVhc2UtaW4tb3V0IGluZmluaXRlO1xuICBzdHJva2UtZGFzaGFycmF5OiA5MCwgMTUwO1xuICBzdHJva2UtZGFzaG9mZnNldDogMDtcbiAgc3Ryb2tlLXdpZHRoOiAyO1xuICBzdHJva2U6IHZhcigtLWVsLWJ1dHRvbi10ZXh0LWNvbG9yKTtcbiAgc3Ryb2tlLWxpbmVjYXA6IHJvdW5kO1xufVxuPC9zdHlsZT5cbiIsImltcG9ydC1tYXAuanNvbiI6IntcbiAgXCJpbXBvcnRzXCI6IHt9XG59IiwidHNjb25maWcuanNvbiI6IntcbiAgXCJjb21waWxlck9wdGlvbnNcIjoge1xuICAgIFwidGFyZ2V0XCI6IFwiRVNOZXh0XCIsXG4gICAgXCJqc3hcIjogXCJwcmVzZXJ2ZVwiLFxuICAgIFwibW9kdWxlXCI6IFwiRVNOZXh0XCIsXG4gICAgXCJtb2R1bGVSZXNvbHV0aW9uXCI6IFwiQnVuZGxlclwiLFxuICAgIFwidHlwZXNcIjogW1wiZWxlbWVudC1wbHVzL2dsb2JhbC5kLnRzXCJdLFxuICAgIFwiYWxsb3dJbXBvcnRpbmdUc0V4dGVuc2lvbnNcIjogdHJ1ZSxcbiAgICBcImFsbG93SnNcIjogdHJ1ZSxcbiAgICBcImNoZWNrSnNcIjogdHJ1ZVxuICB9LFxuICBcInZ1ZUNvbXBpbGVyT3B0aW9uc1wiOiB7XG4gICAgXCJ0YXJnZXRcIjogMy40XG4gIH1cbn1cbiIsInNyYy9NeUJ1dHRvbi52dWUiOiI8c2NyaXB0IHNldHVwID5cclxuaW1wb3J0IHsgcmVmLCB1c2VTbG90cyB9IGZyb20gJ3Z1ZSdcclxuXHJcbmNvbnN0IHByb3BzID0gZGVmaW5lUHJvcHMoWydvbkNsaWNrJ10pXHJcblxyXG5jb25zdCBsb2FkaW5nID0gcmVmKGZhbHNlKVxyXG5jb25zdCBjbGlja0hhbmRsZXIgPSBhc3luYyAoZSkgPT4ge1xyXG4gIGxvYWRpbmcudmFsdWUgPSB0cnVlXHJcbiAgdHJ5IHtcclxuICAgIGF3YWl0IHByb3BzLm9uQ2xpY2soZSlcclxuICB9IGZpbmFsbHkge1xyXG4gICAgbG9hZGluZy52YWx1ZSA9IGZhbHNlXHJcbiAgfVxyXG59XHJcbmNvbnN0IHNsb3RzID0gdXNlU2xvdHMoKVxyXG48L3NjcmlwdD5cclxuXHJcbjx0ZW1wbGF0ZT5cclxuICA8ZWwtYnV0dG9uIEBjbGljaz1cImNsaWNrSGFuZGxlclwiIDpsb2FkaW5nPVwibG9hZGluZ1wiPlxyXG4gICAgPHRlbXBsYXRlIHYtZm9yPVwiKF8sIGtleSwgaSkgaW4gc2xvdHNcIiA6a2V5PVwiaVwiICNba2V5XT5cclxuICAgICAgPHNsb3QgOm5hbWU9XCJrZXlcIiAvPlxyXG4gICAgPC90ZW1wbGF0ZT5cclxuICA8L2VsLWJ1dHRvbj5cclxuPC90ZW1wbGF0ZT5cclxuIiwiX28iOnt9fQ==) # 总结 1. 可以通过`defineProps(['onEventName'])`声明事件，组件内部通过`props.onEventName()`触发事件，并且可以获取到事件回调函数的返回值，进而组件内部做更多逻辑处理，如给一个按钮组件自动添加loading等 2. `@eventName`本质就是一个`语法糖`，最后还是会编译为`onEventName`通过`属性的形式` 传递给组件。如需了解更多，请查看文章：[通过编译源码解析Vue不同方式监听事件的区别](https://juejin.cn/post/7371652688960241676) # 结语感谢您耐心阅读这篇文章。如果您觉得内容对您有帮助或启发，请不吝点赞支持。如果您发现文章中的任何错误或需要改进的地方，欢迎您指正批评。