简介
本文内容简介：
vue组件中引入外部js,并调用外部js 中的方法
外部js 中调用vue组件中的方法
外部js引入其它外部js
如有好的方法，也欢迎留言。谢谢！
1. 新建/导入js文件到指定位置
test.js 为主js文件，里面引入了a.js和b.js文件
在这里插入图片描述
2. 编写test.js文件
2.1 编写js文件中的方法
| 1 2 3 | function jsTest1 () {
console.log('jsTest1：vue组件中的test()方法调用了我！')
}
|
2.2 module.exports 导出方法
| 1 2 3 | module.exports = {
jsTest1
}
|
3. vue 组件中使用
3.1 引入test.js文件
| 1 | import test from '../../../static/js/test'
|
3.2 在methods中定义方法调用
| 1 2 3 4 5 6 | methods: {
test () {
// 调用外部js中的jsTest1()方法
test.jsTest1()
}
}
|
4. 外部js调用vue组件中的方法
此处分为两种可能：
方式一：vue组件中的方法先调用外部js 中的方法，外部js再调用vue组件中其它方法。
方式二：外部js直接调用vue组件中的方法。
4.1 方式一（传参）
4.1.1 vue组件调用方法时传this参数
| 1 2 3 4 5 6 | methods: {
test () {
// 调用外部js中的jsTest2() 方法，并传入【this】作为参数
test.jsTest2(this)
}
}
|
4.1.2 外部js方法中接受参数
test.js
| 1 2 3 4 5 | function jsTest2 (that) {
console.log('jsTest2：vue组件中的test()方法调用了我， 我要调用vue组件中的test1()方法')
// 调用组件中的test1()方法
that.test1()
}
|
组件中定义test1()方法
| 1 2 3 4 5 6 7 8 9 | methods: {
test () {
// 调用外部js中的jsTest2() 方法，并传入【this】作为参数
test.jsTest2(this)
},
test1 () {
console.log('test1():我被外部js调用了！')
}
}
|
4.2 方式二
4.2.1 方法赋值给window
vue中组件：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | mounted () {
window.test2 = this.test2
},
methods: {
test () {
// 调用外部js中的jsTest2() 方法，并传入【this】作为参数
test.jsTest2(this)
},
test1 () {
console.log('test1():我被外部js调用了！')
},
test2 () {
console.log('*******test2():我被外部js调用了！*****')
}
}
|
4.2.2 window调用
外部js文件test.js: 使用 window.test2()调用
| 1 2 3 4 | function jsTest1 () {
window.test2()
console.log('jsTest1：vue组件中的test()方法调用了我！')
}
|
5. 外部主js文件调用其它js中的方法
5.1 引入a.js和b.js文件
test.js文件：
| 1 2 | let a = require('./a.js')
let b = require('./b.js')
|
5.2 编写a.js和b.js文件
| 1 2 3 4 5 6 7 | a.js
function aTest1 () {
console.log('aTest1：test.js中的jsTest3()方法调用了我！')
}
module.exports = {
aTest1
}
|
b.js
| 1 2 3 4 5 6 | function bTest1 () {
console.log('bTest1：test.js中的jsTest4()方法调用了我！')
}
module.exports = {
bTest1
}
|
5.3 调用a.js和b.js文件方法
test.js:
| 1 2 3 4 5 6 7 8 9 10 11 12 | function jsTest3 () {
console.log('jsTest3：vue组件中的test()方法调用了我， 我要调用a.js中的aTest1()方法')
a.aTest1()
}
function jsTest4 () {
console.log('jsTest4：vue组件中的test()方法调用了我， 我要调用b.js中的bTest1()方法')
b.bTest1()
}
module.exports = {
jsTest3,
jsTest4
}
|
6. 完整代码如下
a.js
| 1 2 3 4 5 6 | function aTest1 () {
console.log('aTest1：test.js中的jsTest3()方法调用了我！')
}
module.exports = {
aTest1
}
|
b.js
| 1 2 3 4 5 6 | function bTest1 () {
console.log('bTest1：test.js中的jsTest4()方法调用了我！')
}
module.exports = {
bTest1
}
|
test.js
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | let a = require('./a.js')
let b = require('./b.js')
function jsTest1 () {
window.test2()
console.log('jsTest1：vue组件中的test()方法调用了我！')
}
function jsTest2 (that) {
console.log('jsTest2：vue组件中的test()方法调用了我， 我要调用vue组件中的test1()方法')
that.test1()
}
function jsTest3 () {
console.log('jsTest3：vue组件中的test()方法调用了我， 我要调用a.js中的aTest1()方法')
a.aTest1()
}
function jsTest4 () {
console.log('jsTest4：vue组件中的test()方法调用了我， 我要调用b.js中的bTest1()方法')
b.bTest1()
}
module.exports = {
jsTest1,
jsTest2,
jsTest3,
jsTest4
}
|
组件中的代码
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | export default {
name: '',
data () {
return {}
},
mounted () {
window.test2 = this.test2
},
methods: {
test () {
// 调用外部js中的jsTest1()方法
test.jsTest1()
// 调用外部js中的jsTest2() 方法，并传入【this】作为参数
test.jsTest2(this)
test.jsTest3()
test.jsTest4()
},
test1 () {
console.log('test1():我被外部js调用了！')
},
test2 () {
console.log('*******test2():我被外部js调用了！*****')
}
}
}
|
7. 结果
扫一扫
214
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
