在 Vue.js 中包含全局函数

Question

在我的 Vue.js 应用程序中，我想要一些全局函数。例如，我可以在每次需要访问数据时调用的 callApi() 函数。

包含这些函数以便我可以在我的所有组件中访问它们的最佳方法是什么？

我应该创建一个文件 functions.js 并将其包含在我的 main.js 中吗？
我应该创建一个 Mixin 并将其包含在我的 main.js 中吗？
还有更好的选择吗？

Answer 1

你最好的选择是插件，它可以让你向全局 vue 系统添加功能。

MyPlugin.install = function (Vue, options) {

// 1. add global method or property
Vue.myGlobalMethod = ...

// 2. add a global asset
Vue.directive('my-directive', {})

// 3. add an instance method
Vue.prototype.$myMethod = ...

}

那么你只需添加

Vue.use(MyPlugin)

在你的代码中调用你的函数之前。

Vue.myGlobalMethod(parameters);

或者你的情况

Vue.callApi(parameters);

Answer 2

Mixins 也可以全局注册。 https://vuejs.org/v2/guide/mixins.html#Global-Mixin

Answer 3

我有一个文件，其功能类似于 func.js 如下所示

export const func = {
   functionName: (data) => {
      return something  
    }
}

在main.js中添加2个字符串

import {func} from './func.js'

Vue.prototype.$func = func

如果在如下脚本标记中，您可以使用所有组件

this.$func.functionName(somedata)

或者如果模板标签像

$func.functionName(somedata)

在 Vue.js 中包含全局函数

Include global functions in Vue.js

javascript

vue.js

vue-resource

vue-component