目录
1 方法一:使用 标签
然后,在组件的方法中,你就可以直接调用 JavaScript 文件中定义的函数了: export default { methods: { yourMethod() { yourFunction1(); yourFunction2(); yourFunction3(); } } }
2 方法二:使用 import 语句
在 Vue 组件的 JavaScript 文件中,使用 import 语句引入 JavaScript 文件中的函数: import { yourFunction1, yourFunction2, yourFunction3 } from './your-file.js'; 然后,在组件的方法中,你就可以直接调用引入的函数了: export default { methods: { yourMethod() { yourFunction1(); yourFunction2(); yourFunction3(); } } }
3 举例
3.1 js文件
// functions.js export function function1() { // 函数1的逻辑 } export function function2() { // 函数2的逻辑 } export function function3() { // 函数3的逻辑 }
3.2 vue 导入js文件
// YourComponent.vue import * as functions from './functions.js'; export default { methods: { yourMethod() { functions.function1(); functions.function2(); functions.function3(); } } }
4 举例
4.1 js文件
// functions.js function function1() { // 函数1的逻辑 } function function2() { // 函数2的逻辑 } function function3() { // 函数3的逻辑 } export default { function1, function2, function3 }
4.2 vue 导入js文件 -->XXX 是一个自定义的变量名
import XXX from './functions.js'; export default { methods: { yourMethod() { XXX.function1(); XXX.function2(); XXX.function3(); } } }