vue /vue-cli3 项目调用自己封装的js文件

本文介绍了如何在Vue CLI3项目中引入并使用自己封装的JS文件。首先,在main.js入口文件中导入JS并挂载到Vue原型上。在使用过程中需要注意,JS文件需导出方法,并且在组件中调用该方法时,不需要使用`this.`前缀。如果误用`this.`,可能导致方法无法正常执行。

1. 在入口文件main.js中引入js文件,然后挂载到vue的原型上:

//引入公共js
import messagebox from "../myJs/messagebox.js"
import publicmethods from "../myJs/publicmethods"
Vue.prototype.messagebox=messagebox;
Vue.prototype.publicmethods=publicmethods;

如图所示:

通过this关键字引用:

this.publicmethods.加上jsz中需要引用的方法名即可

如图:

途中踩的坑:

1. 在需要引入的js中的末尾需要用export将外部引用的方法导出,如图:

2. 由于js文件中的方法是从组件中复制过来的,忘记将调用自己js中的方法的this. 删掉   调用自己js中的方法不需要用this.来调用,直接用即可,不过加上this.在浏览器工具调试时会发现 这个方法根本进不去,所以很快就看出错误了.

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值