chore: 使用 provide 实现上下文共享
This commit is contained in:
		
							parent
							
								
									a64433e57b
								
							
						
					
					
						commit
						6b2c7bad00
					
				| @ -5,6 +5,8 @@ import { | ||||
|   getCurrentInstance, | ||||
|   onBeforeUnmount, | ||||
|   onMounted, | ||||
|   provide, | ||||
|   reactive, | ||||
|   ref, | ||||
|   watch, | ||||
| } from 'vue'; | ||||
| @ -243,7 +245,23 @@ const notifyParent = (event: string, data?: any) => { | ||||
|   } | ||||
| }; | ||||
| 
 | ||||
| // 添加一个函数来检测 wujie props 的变化并更新 initParams | ||||
| // 创建响应式上下文对象 | ||||
| const contextRef = ref(null); | ||||
| 
 | ||||
| // 初始化上下文 | ||||
| const initContext = () => { | ||||
|   if (!isValidParams(initParams.value)) return; | ||||
| 
 | ||||
|   contextRef.value = reactive({ | ||||
|     ...initParams.value, | ||||
|     updateTimestamp: Date.now(), | ||||
|   }); | ||||
| }; | ||||
| 
 | ||||
| // 提供上下文给所有子组件 | ||||
| provide('lowCodeContext', contextRef); | ||||
| 
 | ||||
| // 添加一个函数来检测 wujie props 的变化并更新上下文 | ||||
| const setupWujiePropsWatcher = () => { | ||||
|   if (!isWujieSubApp) return; | ||||
| 
 | ||||
| @ -266,17 +284,31 @@ const setupWujiePropsWatcher = () => { | ||||
|       // 更新快照 | ||||
|       prevPropsSnapshot = currentPropsSnapshot; | ||||
| 
 | ||||
|       // 获取当前的 props,并确保创建新的对象引用 | ||||
|       // 解析新的 props | ||||
|       const newProps = JSON.parse(currentPropsSnapshot); | ||||
|       const oldParams = initParams.value; | ||||
| 
 | ||||
|       // 创建新的引用,确保子组件能检测到变化 | ||||
|       // 更新 initParams | ||||
|       initParams.value = { | ||||
|         ...newProps, | ||||
|         _timestamp: Date.now(), // 添加时间戳确保每次更新都是新对象 | ||||
|         _timestamp: Date.now(), | ||||
|       }; | ||||
| 
 | ||||
|       console.log('initParams 已更新为新对象:', initParams.value); | ||||
|       // 如果上下文已初始化,更新上下文 | ||||
|       if (contextRef.value) { | ||||
|         // 使用 Object.assign 保持响应式 | ||||
|         Object.assign(contextRef.value, { | ||||
|           ...newProps, | ||||
|           updateTimestamp: Date.now(), | ||||
|         }); | ||||
| 
 | ||||
|         console.log('上下文已更新:', contextRef.value); | ||||
| 
 | ||||
|         // 触发上下文更新事件 | ||||
|         if (isWujieSubApp) { | ||||
|           window.$wujie.bus.$emit('context-updated', contextRef.value); | ||||
|         } | ||||
|       } | ||||
| 
 | ||||
|       // 如果核心参数发生变化,重新加载组件 | ||||
|       if ( | ||||
| @ -286,38 +318,15 @@ const setupWujiePropsWatcher = () => { | ||||
|       ) { | ||||
|         console.log('核心参数发生变化,重新加载组件'); | ||||
|         reloadComponent(); | ||||
|       } else { | ||||
|         // 即使没有重新加载组件,也需要强制更新渲染器 | ||||
|         forceUpdateRenderer(); | ||||
|       } | ||||
|     } | ||||
|   }, 300); | ||||
| 
 | ||||
|   // 组件卸载时清除定时器 | ||||
|   onBeforeUnmount(() => { | ||||
|     clearInterval(intervalId); | ||||
|   }); | ||||
| }; | ||||
| 
 | ||||
| // 添加一个方法强制更新渲染器 | ||||
| const forceUpdateRenderer = () => { | ||||
|   if (renderer.value && typeof renderer.value.update === 'function') { | ||||
|     // 如果渲染器组件提供了 update 方法,调用它 | ||||
|     console.log('调用渲染器的 update 方法'); | ||||
|     renderer.value.update(initParams.value); | ||||
|   } else { | ||||
|     // 尝试通过临时移除并重新添加组件来强制刷新 | ||||
|     console.log('强制刷新渲染器组件'); | ||||
|     const temp = renderer.value; | ||||
|     renderer.value = null; | ||||
| 
 | ||||
|     // 在下一个周期重新设置组件,强制重新渲染 | ||||
|     setTimeout(() => { | ||||
|       renderer.value = temp; | ||||
|     }, 0); | ||||
|   } | ||||
| }; | ||||
| 
 | ||||
| // 重新加载组件的函数 | ||||
| const reloadComponent = async () => { | ||||
|   if (!isValidParams(initParams.value)) { | ||||
| @ -389,6 +398,9 @@ onMounted(async () => { | ||||
|       if (isWujieSubApp) { | ||||
|         notifyParent('render-success'); | ||||
| 
 | ||||
|         // 初始化上下文 | ||||
|         initContext(); | ||||
| 
 | ||||
|         // 设置 wujie props 监听器 | ||||
|         setupWujiePropsWatcher(); | ||||
|       } | ||||
| @ -411,9 +423,7 @@ onMounted(async () => { | ||||
|     <component | ||||
|       :is="renderer" | ||||
|       v-if="renderer" | ||||
|       :key="initParams?._timestamp || 'default'" | ||||
|       :ctx-props="initParams" | ||||
|       v-bind="initParams" | ||||
|       :ctx-props="contextRef" | ||||
|       style="width: 100%; height: 100%" | ||||
|     /> | ||||
| 
 | ||||
|  | ||||
| @ -26,7 +26,6 @@ const props = withDefaults( | ||||
|     projectId: number; | ||||
|     route?: RouteRecordRaw; | ||||
|     router?: Router; | ||||
|     searchParams?: Record<string, any>; | ||||
|     sync?: boolean; | ||||
|     url?: string; | ||||
|   }>(), | ||||
|  | ||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user
	 wangxuefeng
						wangxuefeng