vue 导入js中的方法

引用地址：https://blog.csdn.net/tenc1239/article/details/131657387

目录

1 方法一：使用 标签

2 方法二：使用 import 语句

3 举例

3.1 js文件

3.2 vue 导入js文件

4 举例

4.1 js文件

4.2 vue 导入js文件 -->XXX 是一个自定义的变量名

5 修改文件后一定要保存 在运行

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();
        }
      }
    }

5 修改文件后一定要保存 在运行
————————————————

                            版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。