如何在 Vue 类组件中使用 date-fns？答案

【问题标题】：How to use date-fns with Vue class component?如何在 Vue 类组件中使用 date-fns？
【发布时间】：2019-12-18 18:04:37
【问题描述】：

Vue 组件：

<template>
  <div class="doc">
    {{ format(2019-08-11T08:13:13.750007, 'DD/MM/YYYY') }}
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import format from 'date-fns/format'

@Component
export default class Document extends Vue {
  public format: string | number | Date = ''
}
</script>

抛出错误：Error in render: "TypeError: _vm.format is not a function"

我怀疑这是因为format 被认为是Document 类属性，而不是date-fns 中的方法。我该如何解决？在纯 JavaScript 中，它开箱即用。

【问题讨论】：

你已经用空字符串初始化了format
@barbsan 格式应该是什么？我如何引用导入的format？
public format 应该从导入设置为format，它是一个函数，而不是字符串 |号码 |日期。如果没有打字稿，它将是format: format，所以public format: {type for function} format？
确实，我试过public format: any: format 并且成功了，谢谢。顺便说一句，我如何输入这个format 的函数？
只是占位符，我对打字稿不太熟悉。你也可以看看this，滚动到“更好的方法”。此外，您还缺少 2019-08-11T08:13:13.750007 周围的引号

标签： javascript typescript vue.js vuejs2 date-fns

【解决方案1】：

代替类property，将format声明为调用导入函数的类方法：

import { Component, Vue } from 'vue-property-decorator'
import format from 'date-fns/format'

@Component
export default class Document extends Vue {
  format(date: string | number | Date, dateFormat: string): string {
    return format(date, dateFormat)
  }
}

【讨论】：

看起来不错，用它作为类属性有什么缺点吗？