企业官网建设流程全解析

网站系统升级需要多久,wordpress文章列表模板,山西网站开发建设,自助建站系统模板背景问题 在Vue应用中#xff0c;组件间通信是常见需求#xff0c;但不同场景需要不同的通信方式。 方案思考 如何实现跨层级通信如何使用事件总线如何处理属性透传 具体实现 跨层级通信#xff1a; // utils/componentCommunication.ts - 组件通信技巧// 1. 使用provide/in…背景问题在Vue应用中组件间通信是常见需求但不同场景需要不同的通信方式。方案思考如何实现跨层级通信如何使用事件总线如何处理属性透传具体实现跨层级通信// utils/componentCommunication.ts - 组件通信技巧// 1. 使用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};}事件总线// 2. 使用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);}属性透传// 3. 使用useAttrs和useSlots处理透传import{useAttrs,useSlots}fromvue;exportfunctionuseForwardProps(){constattrsuseAttrs();constslotsuseSlots();return{forwardedAttrs:attrs,hasDefaultSlot:!!slots.default,hasNamedSlot:(name:string)!!slots[name]};}效果验证通过不同的通信方式可以灵活处理各种组件间通信需求。经验总结选择合适的通信方式很重要避免过度依赖某一种方式要根据具体场景选择最优方案。