核心内容摘要
高空作业下工人安全带安全帽检测数据集VOC+YOLO格式110张4类别
背景问题在Vue应用中组件间通信是常见需求但不同场景需要不同的通信方式。
方案思考如何实现跨层级通信如何使用事件总线如何处理属性透传具体实现跨层级通信// utils/componentCommunication.ts - 组件通信技巧//
使用provide/inject实现跨层级通信// 父组件import{provide,ref}fromvue;exportfunctionuseParentProvider(){constsharedDataref(shared value);provide(shared-data,sharedData);provide(update-data,(newVal:string){sharedData.valuenewVal;});}// 子组件任意层级import{inject}fromvue;exportfunctionuseChildConsumer(){constsharedDatainject(shared-data);constupdateDatainject(update-data);return{sharedData,updateData};}事件总线//
使用mitt实现事件总线importmittfrommitt;typeEvents{user-login:{userId:string;username:string};user-logout:void;data-updated:any;};constemittermittEvents();// 发送事件exportfunctionemitEventTextendskeyofEvents(event:T,data?:Events[T]){emitter.emit(event,data);}// 监听事件exportfunctiononEventTextendskeyofEvents(event:T,handler:(data?:Events[T])void){emitter.on(event,handler);}// 移除监听exportfunctionoffEventTextendskeyofEvents(event:T,handler:(data?:Events[T])void){emitter.off(event,handler);}属性透传//
使用useAttrs和useSlots处理透传import{useAttrs,useSlots}fromvue;exportfunctionuseForwardProps(){constattrsuseAttrs();constslotsuseSlots();return{forwardedAttrs:attrs,hasDefaultSlot:!!slots.default,hasNamedSlot:(name:string)!!slots[name]};}效果验证通过不同的通信方式可以灵活处理各种组件间通信需求。
经验