reactor:测试iframe通信

src/views/test/index.vue

@@ -1,28 +1,34 @@
 <template>
   <div>
+    <el-input v-model="message" style="width: 240px"></el-input>
     <el-button @click="postMessage">发送消息给父窗口</el-button>
     <p>来自父级的消息: {{ iframeMessage }}</p>
   </div>
 </template>
 <script setup lang="ts" name="testIframe">
-import { onMounted, ref } from "vue";
+import { onMounted, ref, onBeforeUnmount } from "vue";
+
+const message = ref("");
 const postMessage = () => {
   window.parent.postMessage(
     {
       type: "FROM_CHILD",
-      data: "Hello from iframe!",
+      data: message.value,
     },
     "*"
   );
 };
+const handleMessage = (event) => {
+  if (event.data.type === "FROM_PARENT") {
+    iframeMessage.value = event.data.data;
+  }
+};
 const iframeMessage = ref("");
 onMounted(() => {
-  window.addEventListener("message", (event) => {
-    if (event.data.type === "FROM_PARENT") {
-      console.log("Parent says:", event.data.data);
-      iframeMessage.value = event.data.data;
-    }
-  });
+  window.addEventListener("message", handleMessage);
+});
+onBeforeUnmount(() => {
+  window.removeEventListener("message", handleMessage);
 });
 </script>
 <style scoped lang="scss"></style>