Vue—— Vue3 + Node.js 后台管理系统 之 【组件通信技巧】

背景问题

在Vue应用中，组件间通信是常见需求，但不同场景需要不同的通信方式。

方案思考

• 如何实现跨层级通信
• 如何使用事件总线
• 如何处理属性透传

具体实现

跨层级通信：

// utils/componentCommunication.ts - 组件通信技巧// 1. 使用provide/inject实现跨层级通信// 父组件import{provide,ref}from'vue';exportfunctionuseParentProvider(){constsharedData=ref('shared value');provide('shared-data',sharedData);provide('update-data',(newVal:string)=>{sharedData.value=newVal;});}// 子组件（任意层级）import{inject}from'vue';exportfunctionuseChildConsumer(){constsharedData=inject('shared-data');constupdateData=inject('update-data');return{sharedData,updateData};}

事件总线：

// 2. 使用mitt实现事件总线importmittfrom'mitt';typeEvents={'user-login':{userId:string;username:string};'user-logout':void;'data-updated':any;};constemitter=mitt<Events>();// 发送事件exportfunctionemitEvent<TextendskeyofEvents>(event:T,data?:Events[T]){emitter.emit(event,data);}// 监听事件exportfunctiononEvent<TextendskeyofEvents>(event:T,handler:(data?:Events[T])=>void){emitter.on(event,handler);}// 移除监听exportfunctionoffEvent<TextendskeyofEvents>(event:T,handler:(data?:Events[T])=>void){emitter.off(event,handler);}

属性透传：

// 3. 使用useAttrs和useSlots处理透传import{useAttrs,useSlots}from'vue';exportfunctionuseForwardProps(){constattrs=useAttrs();constslots=useSlots();return{forwardedAttrs:attrs,hasDefaultSlot:!!slots.default,hasNamedSlot:(name:string)=>!!slots[name]};}

效果验证

通过不同的通信方式，可以灵活处理各种组件间通信需求。

经验总结

选择合适的通信方式很重要，避免过度依赖某一种方式，要根据具体场景选择最优方案。