Vuejs 错误，无效的道具：道具的类型检查失败。预期日期，得到数值答案

【问题标题】：Vuejs error, Invalid prop: type check failed for prop. Expected Date, got Number with valueVuejs 错误，无效的道具：道具的类型检查失败。预期日期，得到数值
【发布时间】：2020-01-22 21:52:45
【问题描述】：

我有一个非常简单的代码，应该可以让我开始学习 Vue，但不知何故我仍然设法弄错了它。我有以下代码：

export default {
  name: 'my-component',
  data() {
      return {
          model: this.value,
          dateConfig: {
              format: 'DD-MM-YYYY',
              useCurrent: true,
              firstDate: this.minDate,
              secondDate: this.maxDate
          },
      }
  },
  props: {
    firstDate: {type: Date, required: false},
    secondDate: {type: Date, required: false}
  }
}

并在导入此文件并尝试在另一个页面中使用它之后，如下所示：

<my-component v-bind:first-date="12-12-2019" v-bind:second-date="31-11-2011"></my-component>

这会返回以下两个错误：

无效的道具：道具“firstDate”的类型检查失败。预期日期，得到值为 -2019 的 Number。

和

无效的道具：道具“secondDate”的类型检查失败。预期日期，得到值为 -1991 的 Number。

虽然第一个错误有点道理（尽管我不知道为什么会发生），但第二个错误让我感到震惊，因为我在任何地方都没有“1991”。有人可以向我解释为什么会发生这种情况，因为我坚持日期应该采用的格式？

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

您对props 和Date 有误解。

“12-12-2019”是String，但不是Date。所以你不能在子组件中将此道具作为日期。

如果你想传递纯字符串 prop，你也不应该使用 v-bind。

<my-component
   first-date="12-12-2019"
   second-date="31-11-2011"
></my-component>

有关更多信息，当您使用 v-bind 时，vue 将其值识别为脚本。假设有一个数据值 firstDateValue: "12-12-2019"

v-bind:first-date="firstDateValue" // String "12-12-2019"

first-date="firstDateValue" // also String "firstDateValue"

而v-bind:first-date可以简化为:first-date。

export default {
  name: 'my-component',
  data() {
      return {
          model: this.value,
          dateConfig: {
              format: 'DD-MM-YYYY',
              useCurrent: true,
              firstDate: this.minDate,
              secondDate: this.maxDate
          },
      }
  },
  props: {
    firstDate: {type: String, required: false},
    secondDate: {type: String, required: false}
  }
}

...

<my-component
   first-date="12-12-2019"
   second-date="31-11-2011"
></my-component>

【讨论】：

Ty 强调了错误，但我似乎仍然无法传递Date。即使没有引号，它也表示它是一个字符串。
需要在子组件中将Date改成String。

【解决方案2】：

这是因为你在 props javascript 中传入了一个表达式。从您的示例中：11 - 31 - 2011 === -1991。

我建议阅读文档以了解道具： https://vuejs.org/v2/guide/components-props.html#Passing-Static-or-Dynamic-Props

您可以按如下方式修复它：

<my-component
  v-bind:first-date="new Date('12-12-2019')"
  v-bind:second-date="new Date('31-11-2011')"
></my-component>

但我会将数据作为字符串传递。但是在这种情况下，不要忘记更改组件中传递参数的类型。 «日期»更改为«字符串»。

希望对你有所帮助。

【讨论】：

【解决方案3】：

你需要传递一个Date类型的变量，因为MyComponent的Props需要这个类型

参见文档Vue

<template>
    <MyComponent :first-date="firstDate" :second-date="secondDate" />
</template>

<script>
export default {
   data: () => ({
      firstDate: new Date('12-12-2019'),
      secondDate: new Date('31-11-2011')
   })
}
</script>

【讨论】：