在外部js中对vue内容进行修改

本文探讨了如何在Vue组件中导入并使用外部定义的函数,尤其是当该函数包含一个需要在Vue中触发操作的click事件监听器。首先尝试了使用全局变量存储数据,但遇到问题;最终通过函数参数传递处理函数的方式解决了问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

问题描述

在某个js文件中定义了一个函数func,并export,在vue中import func,在func中有一个监听器,需要在click事件发生时执行某个操作,但是这个操作是在vue中执行的,也就是说监听器定义在外部js的函数中,而触发的操作需要在vue中完成。

解决

一开始是想用一个全局变量(例如window.localStroage.setItem)在click事件触发时存储相关参数,然后在vue中监听这个参数,发生改变时,执行vue中的处理函数。但是遇到了一些问题,并且最后也没有成功。
后来想到可以直接在func的参数中定义一个函数handle,将vue中的处理函数作为参数传递给func,func的click事件触发时,直接在func内部调用handle函数进行处理即可。
### 如何在Vue项目中正确引入外部JS文件 #### 方法一:通过`import`语句引入 如果外部JS文件是一个遵循ES6模块化的文件,则可以通过`import`语句将其导入到Vue组件中。例如: ```javascript // 外部JS文件 example.js const submitForm = function(formName, vueObject) { let val; vueObject.$refs[formName].validate((valid) => { if (valid) { val = valid; } else { val = false; } }); return val; }; export { submitForm }; ``` 在Vue组件中可以这样引入并使用该函数: ```javascript import { submitForm } from './path/to/example'; methods: { handleFormSubmission() { const result = submitForm('myForm', this); console.log(result); } } ``` 这种方法适用于需要按需加载的功能模块[^2]。 --- #### 方法二:通过HTML `<script>`标签全局引入 对于一些不支持模块化或者希望在整个应用范围内可用的库,可以在`public/index.html`文件中直接通过`<script>`标签引入这些资源。这种方式使得所引入的内容成为全局变量的一部分,在任何地方都可以访问而无需显式导入。 ```html <!-- public/index.html --> <head> ... <script src="/static/js/globalLibrary.js"></script> <!-- 假设路径如此 --> </head> ``` 之后可以直接利用这个全局定义的对象或方法,比如假设globalLibrary.js暴露了一个名为`GlobalFunction`的方法: ```javascript created() { GlobalFunction(); } ``` 此方式适合于那些不需要动态加载且被频繁使用的第三方工具类库[^3]。 --- #### 方法三:挂载至Vue原型链上实现全局调用 当某些功能逻辑较为复杂又不想每次都需要单独import的时候,可以选择将它们附加到Vue实例的prototype属性上来达到整个应用程序范围内的可访问性目的。 首先创建一个专门用于初始化此类插件的服务端入口文件plugins.js: ```javascript // plugins.js import Vue from 'vue'; import * as UtilityFunctions from '@/utils/utility'; UtilityFunctions.forEach(fn => Vue.prototype[`$${fn.name}`] = fn); ``` 接着修改main.js来确保它被执行: ```javascript import Vue from 'vue'; import App from './App.vue'; import './plugins'; // 加载自定义插件 new Vue({ render: h => h(App), }).$mount('#app'); ``` 现在就可以像下面这样简单地调用了: ```javascript this.$someUtilityMethod(); ``` 这种模式特别有利于保持代码的一致性和减少重复劳动量[^1]。 --- #### 方法四:转换JSON数据为CSV并通过点击事件触发下载链接生成 这里给出另一个实用的例子——把前端接收到的数据结构导出成易于分享的形式如Excel表格(csv格式),这通常涉及到操作DOM节点以及Blob API 的运用。 先准备辅助性的utility函数jsonToCsv.js如下所示: ```javascript function JSonToCSV(options){ var uri='data:text/csv;charset=utf-8,'+ encodeURIComponent(options.data.map(row=> Object.values(row).join(",")).join("\n")); var link=document.createElement("a"); link.setAttribute("href",uri); link.setAttribute("download",options.fileName||"output.csv"); document.body.appendChild(link); link.click(); } export default {setDataConver : JSonToCSV}; ``` 随后只需简单的配置即可完成任务: ```javascript import JSonToCSV from '../helper/jsonToCsv' methods:{ downLoadEvent(){ if (!this.formData.json) { alert("Please provide JSON data."); return ; } try{ let parsedData=JSON.parse(this.formData.json); JSonToCSV.setDataConver({ data:parsedData, fileName:'example_output' }); }catch(err){ console.error(`Invalid JSON provided ${err.message}`); } } } ``` 上述过程展示了如何优雅地处理业务需求的同时维持良好的用户体验[^4]。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值