目录Vue项目中引入js文件的几种方法1.在index.html页面使用script标签引入2.在main.js中使用window.moduleName 使用3.手动添加export
在开发Vue项目的时候，有时需要使用一些非es6格式的没有export的js库，可以有如下方法实现:
当然也可以使用cdn的地址。这样引入后的内容是全局的，可以在所有地方使用。
<!DOCTYPE html>
<html lang=zh-CN>
<head>
<meta charset=utf-8>
<meta Http-equiv=X-UA-Compatible content="IE=edge">
<meta name=viewport
content="width=device-width,initial-scale=1,maximum-scale=1,user-Scalable=no,viewport-fit=cover">
<title>网签合同查询</title>
<link rel=stylesheet href=./static/index.b0707a6a.CSS>
**被引入的JS**
<script src=https://isdapp.shandong.Gov.cn/jmopen/jssdk/index.js charset=utf-8></script>
</head>
<body>
<div id=app></div>
<script src=./static/js/chunk-vendors.9051d855.js></script>
<script src=./static/js/index.d88e62c6.js></script>
</body>
</html>
也可以放入Vue.prototype中，这样组件内都可以使用。
var THREE = window.THREEvar GLTFLoader = THREE.GLTFLoader
Vue.prototype.THREE = THREE
为js库中需要使用的方法放入export default { /要导出的方法/}，然后通过import {*} from 使用
在JS库中：
function realconsole(){
alert("hello world!"); }
export {
realconsole }在需要使用JS库的组件中：
import realconsole from './xxx'import '@static/libs/GLTFLoader'
// 可以从全局获取导入的方法
let GLTFLoader = THREE.GLTFLoader话外：若我们需要在被调用的JS文件的方法中去调用vue页面的方法可以进行以下操作
在 vue 页面将方法注册到 window 对象上, 之后在js页面直接 window.xxx 调用即可
demo.vue
mounted() {
window.functionForJs = this.functionForJs
},
methods: {
functionForJs(data) {
console.log('接收参数', data)
}
}demo.js
export function doSomething() {
window.functionForJs('哈哈哈')
}到此这篇关于vue引用外部JS并调用JS文件中的方法的文章就介绍到这了,更多相关vue引用外部JS内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
--结束END--
本文标题: vue引用外部JS并调用JS文件中的方法实例
本文链接: https://lsjlt.com/news/197628.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0