创建 vue.js 全局函数答案

【问题标题】：Create vue.js global function创建 vue.js 全局函数
【发布时间】：2020-07-02 21:14:19
【问题描述】：

我计划使用 vue.js 创建一个小型应用程序，我想创建一个函数可以在我的应用程序中使用，而无需每次都重新编写代码, 在每个组件中。

这是我现在的 app.js 代码：

require('./bootstrap')


import VueRouter from 'vue-router';
import VueProgressBar from 'vue-progressbar';

Vue.use(VueRouter);

【问题讨论】：

标签： vue.js

【解决方案1】：

其实你可以创建一个mixin，然后将它导入到任何你想要的地方。

假设你有一个方法，你想在代码的任何地方使用它。你必须像这样创建它：

// mixins/mixin.js
export default {
  methods: {
    myFunction() {
      // your function
    }
  }
}

然后你可以简单地将它导入到你的其他文件中，比如app.js，如下所示：

// app.js
import mixin from '~/mixins/mixin';

export default {
   mixins: [mixin],
   created: function() {
    this.myFunction();
  }
}

【讨论】：

【解决方案2】：

您可以通过定位 Vue 原型对象来设置自定义函数。

Vue.prototype.customFunction = () => {
  // your function logic
};

然后您可以在组件中使用 this 关键字调用它。

this.customFunction();

【讨论】：