Vue 中如何调用外部函数

在Vue开发中，有时我们需要在Vue组件中调用外部定义的函数，这在处理一些复杂业务逻辑或与外部库交互时非常常见。下面将详细介绍几种在Vue中调用外部函数的方法。

方法一：将外部函数引入到Vue组件中

假设我们有一个外部的JavaScript文件utils.js，其中定义了一个函数：

// 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: 0
    };
  },
  mounted() {
    this.result = add(2, 3);
  }
};
</script>

方法二：通过Vue原型挂载外部函数

如果我们希望在多个Vue组件中都能方便地调用同一个外部函数，可以将函数挂载到Vue的原型上。

首先在入口文件main.js中：

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

Vue.prototype.$add = add;

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

然后在任何Vue组件中都可以通过this.$add来调用这个函数：

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

<script>
export default {
  data() {
    return {
      result: 0
    };
  },
  mounted() {
    this.result = this.$add(4, 5);
  }
};
</script>

方法三：使用Vue的混入（mixins）

混入可以让我们在多个组件中共享一些方法或数据。我们可以创建一个混入对象，将外部函数包含在其中，然后在需要的组件中使用这个混入。

// mixin.js
import { add } from './utils.js';

export const myMixin = {
  methods: {
    addNumbers(a, b) {
      return add(a, b);
    }
  }
};

在组件中使用混入：

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

<script>
import { myMixin } from './mixin.js';

export default {
  mixins: [myMixin],
  data() {
    return {
      result: 0
    };
  },
  mounted() {
    this.result = this.addNumbers(6, 7);
  }
};
</script>

通过以上几种方法，我们可以在Vue中灵活地调用外部函数，根据具体的业务需求选择合适的方式。