vue使用prop可以渲染但是打印台报错的解决方式

2023年6月11日上午11:29 • JavaScript

在Vue中，组件间的数据传递是通过props进行的。然而，有时候我们会在控制台看到如下的错误信息：

[Vue warn]: Invalid prop: type check failed for prop "xxx". Expected xxx, got xxx.

这个错误信息通常是由于在传递过程中，子组件收到的props数据类型与它预期的不符，或者缺少必要的参数导致的。但有时，即便我们的数据被正确显示，依旧会有这个错误出现。在这种情况下，我们可以使用以下攻略来解决这个问题。

攻略一：优化类型检测

如果我们在父组件中通过prop把数据传递给子组件时，数据类型是正确的，但是在子组件中控制台提示此类错误，这说明 Vue 的类型检测出现了问题，这时我们可以尝试在子组件中通过 validator 进行类型检测。这样一来即使在prop类型正确却被检测出问题的情况下，我们依旧可以顺利通过数据。

下面是一个示例，我们定义了一个命名为Message的子组件，并把属性msg传递给它。如果子组件中的单数msg是一个字符串，那么就会出现这个问题。因为 Vue 默认的类型检测函数在这种情况下会把字符串和数字都符合要求，从而不会抛出这个错误。但是，我们知道，实际上 msg 应该是一个字符串类型的，因此我们要通过validator重写类型检测。

<template>
  <div>{{ msg }}</div>
</template>

<script>
export default {
  props: {
    msg: {
      type: String,
      validator: function(value) {
        return typeof value === 'string';
      }
    }
  }
}
</script>

在这个例子中，我们把数据的类型检测从 Vue 的默认实现重写，使得它只接受 string 类型的数据。

攻略二：使用vue-devtools进行调试

如果你在控制台中看到一个无意义的错误信息，那么可以使用 Vue Devtools 来追踪问题。 Vue Devtools 是一个非常有用的浏览器插件，它可以帮助我们更好地理解我们程序正在发生的事情，以及识别并解决潜在的问题。在 Devtools 中，你可以看到组件树以及它们的 props 和数据，以及任何更改时的实时回调。

下面是使用 Devtools 进行调试的简单步骤：