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

Posted 2023-02-23

【中文标题】Vuejs 错误，无效的道具：道具的类型检查失败。预期日期，得到数值

【英文标题】：Vuejs error, Invalid prop: type check failed for prop. Expected Date, got Number with value

【发布时间】：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”。有人可以向我解释为什么会发生这种情况，因为我坚持日期应该采用的格式？

【参考方案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>