Vue 3 中,如果 public 目录下的 .js 文件中有一个函数执行后生成数据,并希望将这些数据传递到组件中
在 Vue 3 中,如果 public 目录下的 .js 文件中有一个函数执行后生成数据,并希望将这些数据传递到组件中,可以使用 window.postMessage,但需要结合具体场景。以下是不同方法的详细说明:
方法 1:使用 window.postMessage(跨窗口/跨域通信)
window.postMessage 主要用于 跨窗口通信(例如与 iframe 或新打开的窗口)或 跨域通信。如果数据来自外部窗口或需要跨域传递,可以用此方法。
实现步骤:
- 在 public 的 .js 文件中发送数据
假设 public/js/data.js 中有一个函数生成数据后发送消息:
// public/js/data.js
function generateData() {const data = [1, 2, 3, 4, 5];// 发送消息到父窗口(假设此脚本在 iframe 中运行)window.parent.postMessage({ type: 'DATA_UPDATE', payload: data }, '*');
}
generateData();
- 在 Vue 组件中监听消息
<script>
export default {data() {return {receivedData: []};},mounted() {window.addEventListener('message', this.handleMessage);},beforeUnmount() {window.removeEventListener('message', this.handleMessage);},methods: {handleMessage(event) {// 验证来源(避免安全风险)// if (event.origin !== '期望的域名') return;if (event.data.type === 'DATA_UPDATE') {this.receivedData = event.data.payload;}}}
};
</script>
适用场景
数据来自 iframe 或新窗口。
需要跨域通信(需严格验证 event.origin)。
方法 2:直接触发全局事件(同一窗口)
如果数据在同一窗口内生成,可以通过 自定义事件 或 全局变量 直接传递,无需 postMessage。
实现步骤:
- 在 public 的 .js 文件中触发事件
// public/js/data.js
function generateData() {const data = [1, 2, 3, 4, 5];// 触发自定义事件const event = new CustomEvent('DATA_READY', { detail: data });window.dispatchEvent(event);
}
generateData();
- 在 Vue 组件中监听事件
<script>
export default {data() {return {receivedData: []};},mounted() {window.addEventListener('DATA_READY', this.handleDataReady);},beforeUnmount() {window.removeEventListener('DATA_READY', this.handleDataReady);},methods: {handleDataReady(event) {this.receivedData = event.detail;}}
};
</script>
优点
无需跨窗口,直接在同一页面通信。
代码更简洁,无需处理跨域安全。
方法 3:通过全局变量直接访问(最简单)
如果数据生成后可以直接挂载到全局对象:
- 在 public 的 .js 中暴露数据
// public/js/data.js
function generateData() {window.publicData = [1, 2, 3, 4, 5];
}
generateData();
- 在组件中直接访问
<script>
export default {data() {return {localData: window.publicData || []};}
};
</script>
方法 4:动态执行函数(适用于非模块化脚本)
如果数据是通过函数动态生成的,可以通过 eval 或 Function 执行脚本并提取数据:
<script>
export default {data() {return {localData: []};},async mounted() {const response = await fetch(`${import.meta.env.BASE_URL}js/data.js`);const scriptText = await response.text();// 动态执行脚本并获取数据const getData = new Function(`${scriptText}return generateData(); // 假设 generateData() 返回数据`);this.localData = getData();}
};
</script>
方法选择建议
同一窗口内通信
优先使用 全局事件 (CustomEvent) 或 全局变量。
如果数据生成是同步的,直接用全局变量;如果是异步的,用事件通知。
跨窗口/跨域通信
使用 window.postMessage,但务必验证 event.origin。
静态数据
将 .js 文件改为 ES 模块,通过动态 import() 引入(推荐)。
安全注意事项
避免 XSS 攻击:如果直接执行来自 public 目录的脚本,需确保文件内容可信。
验证消息来源:使用 postMessage 时,始终检查 event.origin。
避免全局污染:尽量使用模块化方案或事件机制,减少对 window 对象的依赖。
通过以上方法,可以灵活地将 public 目录下 .js 文件中的函数生成的数据传递到 Vue 组件中。
相关文章:
Vue 3 中,如果 public 目录下的 .js 文件中有一个函数执行后生成数据,并希望将这些数据传递到组件中
在 Vue 3 中,如果 public 目录下的 .js 文件中有一个函数执行后生成数据,并希望将这些数据传递到组件中,可以使用 window.postMessage,但需要结合具体场景。以下是不同方法的详细说明: 方法 1:使用 window…...
ai大模型自动化测试-TensorFlow Testing 测试模型实例
AI大模型自动化测试是确保模型质量、可靠性和性能的关键环节,以下将从测试流程、测试内容、测试工具及测试挑战与应对几个方面进行详细介绍: 测试流程 测试计划制定 确定测试目标:明确要测试的AI大模型的具体功能、性能、安全性等方面的目标,例如评估模型在特定任务上的准…...
初阶MySQL(两万字全面解析)
文章目录 1.初识MySQL1.1数据库1.2查看数据库1.3创建数据库1.4字符集编码和排序规则1.5修改数据库1.6删除数据库 2.MySQL常用数据类型和表的操作2.(一)常用数据类型1.数值类2.字符串类型3.二进制类型4.日期类型 2.(二)表的操作1查看指定库中所有表2.创建表 3.查看表结构和查看表…...
数据库数据恢复—SQL Server附加数据库报错“错误 823”怎么办?
SQL Server数据库附加数据库过程中比较常见的报错是“错误 823”,附加数据库失败。 如果数据库有备份则只需还原备份即可。但是如果没有备份,备份时间太久,或者其他原因导致备份不可用,那么就需要通过专业手段对数据库进行数据恢复…...
SpringBatch简单处理多表批量动态更新
项目需要处理一堆表,这些表数据量不是很大都有经纬度信息,但是这些表的数据没有流域信息,需要按经纬度信息计算所属流域信息。比较简单的项目,按DeepSeek提示思索完成开发,AI真好用。 阿里AI个人版本IDEA安装 IDEA中使…...
夜莺监控 - 边缘告警引擎架构详解
前言 夜莺类似 Grafana 可以接入多个数据源,查询数据源的数据做告警和展示。但是有些数据源所在的机房和中心机房之间网络链路不好,如果由 n9e 进程去周期性查询数据并判定告警,那在网络链路抖动或拥塞的时候,告警就不稳定了。所…...
18440二维差分
18440二维差分 ⭐️难度:中等 📖 📚 import java.util.Scanner;public class Main {public static void main(String[] args) {Scanner scanner new Scanner(System.in);int n scanner.nextInt();int m scanner.nextInt();int q scanne…...
安全传输,高效共享 —— 体验FileLink的跨网文件传输
在当今数字化转型的浪潮中,企业在进行跨网文件传输时面临诸多挑战,包括数据安全、传输速度和用户体验等。为了解决这些问题,FileLink应运而生,成为一款高效、安全的跨网文件传输解决方案。 一、FileLink的核心特点 1.加密技术 …...
SOME/IP 教程知识点总结
总结关于SOME/IP的教程,首先通读整个文件,理解各个部分的内容。看起来这个教程从介绍开始,讲到了为什么在车辆中使用以太网,然后详细讲解了SOME/IP的概念、序列化、消息传递、服务发现(SOME/IP-SD)、发布/订阅机制以及支持情况。 首先,我需要确认每个章节的主要知识点。…...
学习路程八 langchin核心组件 Models补充 I/O和 Redis Cache
前序 之前了解了Models,Prompt,但有些资料又把这块与输出合称为模型输入输出(Model I/O):这是与各种大语言模型进行交互的基本组件。它允许开发者管理提示(prompt),通过通用接口调…...
图书数据采集:使用Python爬虫获取书籍详细信息
文章目录 一、准备工作1.1 环境搭建1.2 确定目标网站1.3 分析目标网站二、采集豆瓣读书网站三、处理动态加载的内容四、批量抓取多本书籍信息五、反爬虫策略与应对方法六、数据存储与管理七、总结在数字化时代,图书信息的管理和获取变得尤为重要。通过编写Python爬虫,可以从各…...
【DeepSeek系列】05 DeepSeek核心算法改进点总结
文章目录 一、DeepSeek概要二、4个重要改进点2.1 多头潜在注意力2.2 混合专家模型MoE2.3 多Token预测3.4 GRPO强化学习策略 三、2个重要思考3.1 大规模强化学习3.2 蒸馏方法:小模型也可以很强大 一、DeepSeek概要 2024年~2025年初,DeepSeek …...
安装pointnet2-ops库
由于服务器没有连网,现在已在github中下载pointnet2_ops文件包并上传到服务器 (首先保证cuda版本和pytorch版本对应) 如何查找cuda的安装路径: 然后执行安装命令即可。...
DO-254航空标准飞行器电机控制器设计注意事项
DO-254航空标准飞行器电机控制器设计注意事项 1.核心要求1.1 设计保证等级(DAL)划分1.2生命周期管理1.3验证与确认2.电机控制器硬件设计的关键注意事项2.1需求管理与可追溯性2.2冗余与容错设计2.3验证与确认策略2.4元器件选型与管理2.5环境适应性设计2.6文档与配置管理3.应用…...
ABAP语言的动态程序
通过几个例子,由浅入深讲解 ABAP 动态编程。ABAP 动态编程主要通过 RTTS (Runtime Type Services) 来实现,包括 RTTI 和 RTTC: 运行时类型标识(RTTI) – 提供在运行时获取数据对象的类型定义的方法。运行时类型创建(R…...
开源电商项目、物联网项目、销售系统项目和社区团购项目
以下是推荐的开源电商项目、物联网项目、销售系统项目和社区团购项目,均使用Java开发,且无需付费,GitHub地址如下: ### 开源电商项目 1. **mall** GitHub地址:[https://github.com/macrozheng/mall](https://git…...
Docker教程(喂饭级!)
如果你有跨平台开发的需求,或者对每次在新机器上部署项目感到头疼,那么 Docker 是你的理想选择!Docker 通过容器化技术将应用程序与其运行环境隔离,实现快速部署和跨平台支持,极大地简化了开发和部署流程。本文详细介绍…...
HTML:自闭合标签简单介绍
1. 什么是自结束标签? 定义:自结束标签(Self-closing Tag)是指 不需要单独结束标签 的 HTML 标签,它们通过自身的语法结构闭合。语法形式: 在 HTML5 中:直接写作 <tag>,例如 …...
【和鲸社区获奖作品】内容平台数据分析报告
1.项目背景与目标 在社交和内容分享领域,某APP凭借笔记、视频等丰富的内容形式,逐渐吸引了大量用户。作为一个旨在提升用户互动和平台流量的分享平台,推荐算法成为其核心功能,通过精准推送内容,努力实现更高的点击率和…...
GitCode 助力 python-office:开启 Python 自动化办公新生态
项目仓库:https://gitcode.com/CoderWanFeng1/python-office 源于需求洞察,打造 Python 办公神器 项目作者程序员晚枫在运营拥有 14w 粉丝的 B 站账号 “Python 自动化办公社区” 时,敏锐察觉到非程序员群体对 Python 学习的强烈需求。在数字…...
装饰模式(Decorator Pattern)重构java邮件发奖系统实战
前言 现在我们有个如下的需求,设计一个邮件发奖的小系统, 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式(Decorator Pattern)允许向一个现有的对象添加新的功能,同时又不改变其…...
Docker 运行 Kafka 带 SASL 认证教程
Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明:server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...
Python爬虫实战:研究feedparser库相关技术
1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代,互联网上存在着海量的信息资源。RSS(Really Simple Syndication)作为一种标准化的信息聚合技术,被广泛用于网站内容的发布和订阅。通过 RSS,用户可以方便地获取网站更新的内容,而无需频繁访问各个网站。 然而,互联网…...
【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现(服务端执行命令请求的过程 - 初始化服务器)
服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...
Python 训练营打卡 Day 47
注意力热力图可视化 在day 46代码的基础上,对比不同卷积层热力图可视化的结果 import torch import torch.nn as nn import torch.optim as optim from torchvision import datasets, transforms from torch.utils.data import DataLoader import matplotlib.pypl…...
Spring Security 认证流程——补充
一、认证流程概述 Spring Security 的认证流程基于 过滤器链(Filter Chain),核心组件包括 UsernamePasswordAuthenticationFilter、AuthenticationManager、UserDetailsService 等。整个流程可分为以下步骤: 用户提交登录请求拦…...
Python竞赛环境搭建全攻略
Python环境搭建竞赛技术文章大纲 竞赛背景与意义 竞赛的目的与价值Python在竞赛中的应用场景环境搭建对竞赛效率的影响 竞赛环境需求分析 常见竞赛类型(算法、数据分析、机器学习等)不同竞赛对Python版本及库的要求硬件与操作系统的兼容性问题 Pyth…...
32单片机——基本定时器
STM32F103有众多的定时器,其中包括2个基本定时器(TIM6和TIM7)、4个通用定时器(TIM2~TIM5)、2个高级控制定时器(TIM1和TIM8),这些定时器彼此完全独立,不共享任何资源 1、定…...
如何把工业通信协议转换成http websocket
1.现状 工业通信协议多数工作在边缘设备上,比如:PLC、IOT盒子等。上层业务系统需要根据不同的工业协议做对应开发,当设备上用的是modbus从站时,采集设备数据需要开发modbus主站;当设备上用的是西门子PN协议时…...
【工具教程】多个条形码识别用条码内容对图片重命名,批量PDF条形码识别后用条码内容批量改名,使用教程及注意事项
一、条形码识别改名使用教程 打开软件并选择处理模式:打开软件后,根据要处理的文件类型,选择 “图片识别模式” 或 “PDF 识别模式”。如果是处理包含条形码的 PDF 文件,就选择 “PDF 识别模式”;若是处理图片文件&…...
