diff --git a/src/components/html-page/IframeConstellationDiagram.vue b/src/components/html-page/IframeConstellationDiagram.vue index 23ce86b..b3d73f3 100644 --- a/src/components/html-page/IframeConstellationDiagram.vue +++ b/src/components/html-page/IframeConstellationDiagram.vue @@ -42,7 +42,8 @@ function sendDataToIframe(payload: Array<[number, number]>) { // 确保 iframe 存在、其 contentWindow 可访问且已发送初始化指令 if (iframeRef.value?.contentWindow && isIframeInitialized.value) { console.log('Vue 组件:向 iframe 发送数据:', payload); - iframeRef.value.contentWindow.postMessage({ type: 'FEED_DATA', payload }, '*'); + // 使用 toRaw 获取原始数据对象 + iframeRef.value.contentWindow.postMessage({ type: 'FEED_DATA', payload: toRaw(payload) }, '*'); } else { console.warn('Vue 组件:iframe 未初始化或数据无效,无法发送 FEED_DATA 消息。'); } @@ -52,6 +53,7 @@ function sendDataToIframe(payload: Array<[number, number]>) { watch( () => props.data, (newData) => { + console.log('Vue 组件:props.data 发生变化:', newData); // 确保新数据有效且 iframe 已初始化 if (newData && newData.length > 0 && isIframeInitialized.value) { // 直接发送更新后的数据 diff --git a/src/pages/Page/iframe-page/IframeConstellationDiagram.page.vue b/src/pages/Page/iframe-page/IframeConstellationDiagram.page.vue index 1c603ec..da08650 100644 --- a/src/pages/Page/iframe-page/IframeConstellationDiagram.page.vue +++ b/src/pages/Page/iframe-page/IframeConstellationDiagram.page.vue @@ -6,11 +6,22 @@ definePage({ }, }); -const data: Array<[number, number]> = [ +type ConstellationDiagramArr = Array<[number, number]>; + +const data = ref([ [0.20898877234451796, 0.8329353515647436], [-0.6589349632101078, 0.5886313023998213], [-0.5525702944049637, -0.7953057951401711], -]; +]); + +setTimeout(() => { + // 测试数据更新 + data.value.push( + [0.20898877234451796, 0.8329353515647436], + [-0.6589349632101078, 0.5886313023998213], + [-0.5525702944049637, -0.7953057951401711], + ); +}, 1000);