36

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

包含这些功能以便我可以在所有组件中访问它的最佳方式是什么？

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

3 回答 3

33

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

[来自vuejs 文档] 

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);
于 2016-09-07T14:56:41.120 回答
32

我有一个文件，其功能类似于 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)
于 2019-11-05T14:00:35.277 回答
6

Mixin 也可以在全球范围内注册。https://vuejs.org/v2/guide/mixins.html#Global-Mixin

于 2017-03-29T04:44:17.953 回答