背景问题
在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]};}效果验证
通过不同的通信方式，可以灵活处理各种组件间通信需求。
经验总结
选择合适的通信方式很重要，避免过度依赖某一种方式，要根据具体场景选择最优方案。
