Question

我有一个非常简单的代码，应该可以使我开始学习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的数字。

和

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

尽管第一个错误有点道理（即使我不知道为什么会发生），但是第二个错误令我震惊，因为我什么地方都没有'1991'。有人可以向我解释为什么会发生这种情况吗，因为我坚持使用日期格式？

Answer 1

您误解了props和Date。

“ 12-12-2019”是String，而不是Date。因此，您无法在子组件中获得该道具作为Date。

如果您想传递纯字符串道具，也不要使用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>

Answer 2

这是因为您在props javascript中传递了一个表达式。以您的示例为例：2011年11月31日=== -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>

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

希望我能对您有所帮助。

Answer 3

您需要传递类型为Date的变量，因为MyComponent的属性要求使用此类型

请参见文档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>

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

3 个答案: