如何在 Vue 中使用全局函数？

Question

我有日期格式化功能。现在我需要在不同的组件中使用这个方法。这种情况的最佳做法是什么？指示？过滤器？或者有什么不同？我该如何定义它？

dateWithoutTime(date) {
  return date ? date.split("T")[0] : ""
}

Answer 1

模块

假设您正在使用 Vue CLI 或等效的捆绑器，最可组合的方式是为实用函数创建一个模块，例如：

utilities.js

export const dateWithoutTime = function(date) {
  return date ? date.split("T")[0] : ""
}

然后您可以在任何需要的地方导入该函数：

SomeComponent.vue

import { dateWithoutTime } from '@/modules/utilities.js'

export default {
  data: () => ({
    someDate: new Date()
  }),
  methods: {
    someMethod() {
      return dateWithoutTime(this.someDate);
    }
  }
}

_{编辑：您也可以使其成为一种直接从模板中使用它的方法：}

methods: {
  dateWithoutTime      // Same as `dateWithoutTime: dateWithoutTime`
}

Vue.prototype

另一种选择是在 Vue.prototype 上设置函数，然后再实例化您的应用程序：

main.js

Vue.prototype.$dateWithoutTime = function(date) {
  return date ? date.split("T")[0] : ""
}

new Vue({
...
})

然后该函数可以在任何组件中使用，例如：

SomeComponent.vue

export default {
  data: () => ({
    someDate: new Date()
  }),
  methods: {
    someMethod() {
      return this.$dateWithoutTime(this.someDate);
    }
  }
}

如何在 Vue 中使用全局函数？

How can I use global functions in Vue?

javascript

global

function

vue.js

vue-component

模块

Vue.prototype