在vue里怎样引入js里的函数

在Vue项目开发中，有时我们需要在Vue组件中引入JavaScript文件里的函数，以实现特定的功能或提高代码的可维护性和复用性。下面将介绍几种常见的方法来实现这一操作。

方法一：在Vue组件中直接引入

如果你有一个独立的JavaScript文件，其中定义了一些函数，你可以在Vue组件中使用import语句直接引入该文件。例如，假设你有一个名为utils.js的文件，其中定义了一个名为add的函数：

// utils.js
export function add(a, b) {
  return a + b;
}

在Vue组件中，可以这样引入并使用这个函数：

<template>
  <div>{{ result }}</div>
</template>

<script>
import { add } from './utils.js';

export default {
  data() {
    return {
      result: null
    };
  },
  mounted() {
    this.result = add(2, 3);
  }
};
</script>

方法二：通过全局挂载的方式引入

在Vue项目的入口文件（通常是main.js）中，你可以将JavaScript文件中的函数挂载到Vue的原型上，这样在所有的Vue组件中都可以使用这些函数。例如：

// main.js
import Vue from 'vue';
import { add } from './utils.js';

Vue.prototype.$add = add;

new Vue({
  //...
}).$mount('#app');

在Vue组件中，可以通过this.$add来调用add函数。

注意事项

• 确保路径正确：在使用import语句引入JavaScript文件时，要确保文件路径的正确性，否则会导致引入失败。
• 避免命名冲突：如果在不同的JavaScript文件中定义了同名的函数，可能会导致命名冲突。在这种情况下，建议使用更具描述性的函数名或者使用模块的方式来组织代码。

通过以上方法，你可以在Vue项目中方便地引入JavaScript文件里的函数，从而提高代码的可维护性和复用性，使项目的开发更加高效。