核心内容摘要
别再愁眉苦脸啦！男生女生的那些“小愁绪”，原来可以这样化解！
背景问题在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]};}效果验证通过不同的通信方式可以灵活处理各种组件间通信需求。
经验