Vue 3 中，如果 public 目次下的 .js 文件中有一个函数实行后天生数据，并 ...

在 Vue 3 中，如果 public 目次下的 .js 文件中有一个函数实行后天生数据，并希望将这些数据传递到组件中，可以利用 window.postMessage，但必要联合具体场景。以下是不同方法的具体说明：

方法 1：利用 window.postMessage（跨窗口/跨域通信）

window.postMessage 主要用于 跨窗口通信（例如与 iframe 或新打开的窗口）或 跨域通信。如果数据来自外部窗口或必要跨域传递，可以用此方法。
实现步骤：

• 在 public 的 .js 文件中发送数据
  假设 public/js/data.js 中有一个函数天生数据后发送消息：
  

1. // public/js/data.js
2. function generateData() {
3.   const data = [1, 2, 3, 4, 5];
4.   // 发送消息到父窗口（假设此脚本在 iframe 中运行）
5.   window.parent.postMessage({ type: 'DATA_UPDATE', payload: data }, '*');
6. }
7. generateData();

复制代码

• 在 Vue 组件中监听消息
  

1. <script>
2. export default {
3.   data() {
4.     return {
5.       receivedData: []
6.     };
7.   },
8.   mounted() {
9.     window.addEventListener('message', this.handleMessage);
10.   },
11.   beforeUnmount() {
12.     window.removeEventListener('message', this.handleMessage);
13.   },
14.   methods: {
15.     handleMessage(event) {
16.       // 验证来源（避免安全风险）
17.       // if (event.origin !== '期望的域名') return;
18.       if (event.data.type === 'DATA_UPDATE') {
19.         this.receivedData = event.data.payload;
20.       }
21.     }
22.   }
23. };
24. </script>

复制代码

实用场景
数据来自 iframe 或新窗口。
必要跨域通信（需严酷验证 event.origin）。
方法 2：直接触发全局事件（同一窗口）

如果数据在同一窗口内天生，可以通过 自定义事件 或 全局变量 直接传递，无需 postMessage。
实现步骤：

• 在 public 的 .js 文件中触发事件
  

1. // public/js/data.js
2. function generateData() {
3.   const data = [1, 2, 3, 4, 5];
4.   // 触发自定义事件
5.   const event = new CustomEvent('DATA_READY', { detail: data });
6.   window.dispatchEvent(event);
7. }
8. generateData();

复制代码

• 在 Vue 组件中监听事件
  

1. <script>
2. export default {
3.   data() {
4.     return {
5.       receivedData: []
6.     };
7.   },
8.   mounted() {
9.     window.addEventListener('DATA_READY', this.handleDataReady);
10.   },
11.   beforeUnmount() {
12.     window.removeEventListener('DATA_READY', this.handleDataReady);
13.   },
14.   methods: {
15.     handleDataReady(event) {
16.       this.receivedData = event.detail;
17.     }
18.   }
19. };
20. </script>

复制代码

长处
无需跨窗口，直接在同一页面通信。
代码更简洁，无需处理跨域安全。
方法 3：通过全局变量直接访问（最简单）

如果数据天生后可以直接挂载到全局对象：

• 在 public 的 .js 中暴露数据
  

1. // public/js/data.js
2. function generateData() {
3.   window.publicData = [1, 2, 3, 4, 5];
4. }
5. generateData();

复制代码

• 在组件中直接访问
  

1. <script>
2. export default {
3.   data() {
4.     return {
5.       localData: window.publicData || []
6.     };
7.   }
8. };
9. </script>

复制代码

方法 4：动态实行函数（实用于非模块化脚本）

如果数据是通过函数动态天生的，可以通过 eval 或 Function 实行脚本并提取数据：

1. <script>
2. export default {
3.   data() {
4.     return {
5.       localData: []
6.     };
7.   },
8.   async mounted() {
9.     const response = await fetch(`${import.meta.env.BASE_URL}js/data.js`);
10.     const scriptText = await response.text();
11.     // 动态执行脚本并获取数据
12.     const getData = new Function(`
13.       ${scriptText}
14.       return generateData(); // 假设 generateData() 返回数据
15.     `);
16.     this.localData = getData();
17.   }
18. };
19. </script>

复制代码

方法选择建议
同一窗口内通信
优先利用 全局事件 (CustomEvent) 或 全局变量。
如果数据天生是同步的，直接用全局变量；如果是异步的，用事件通知。
跨窗口/跨域通信
利用 window.postMessage，但务必验证 event.origin。
静态数据
将 .js 文件改为 ES 模块，通过动态 import() 引入（推荐）。
安全留意事项
制止 XSS 攻击：如果直接实行来自 public 目次的脚本，需确保文件内容可信。
验证消息来源：利用 postMessage 时，始终检查 event.origin。
制止全局污染：尽量利用模块化方案或事件机制，淘汰对 window 对象的依赖。
通过以上方法，可以灵活地将 public 目次下 .js 文件中的函数天生的数据传递到 Vue 组件中。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。