Question

这对我来说是一个长期存在的问题，比方说我有一个父子组件。

// parent
<div>
  // passing a dynamic value
  <child :param="timestamp"/>
</div>

// Child
props: {
  param: {
    type: Number,
    required: true,
  }
},

当param值传递到子组件时，它应该通过验证。

但是，它显示了错误

type check failed for prop "param". Expected Number, got String.

如果我将类型更改为 String ，它仍然会显示错误，但以相反的方式显示

type check failed for prop "param". Expected String, got Number.

非常感谢您知道如何解决此问题。

================================================ =========================

很抱歉，在第一个示例中解释得不好。

因此在我的代码库中，我将一个变量传递给子组件，值的类型始终为Number，假设它是一个时间戳记，因此当我传递该值时，始终会出现不一致的错误，这真的让我感到困惑。

同时，由于我将动态变量传递给子组件，因此我使用v-bind。

Answer 1

我遇到了同样的问题，只是通过在prop定义中同时传递了两种可能性来解决了这个问题，所以代替了

props: {
     myprop: Number, 
     [..]
}

我说可能两者都是：

props: {
    myprop: [String, Number],
    [..]
}

我意识到，如果prop值必须确切地属于某种类型，那么这可能不是一个干净的解决方案，但是我想我还是把它留在这里。

Answer 2

只需：

<child :param="12345"/>

您不需要bind。

请参见以下示例： https://codesandbox.io/s/ryv49jm594

App.vue

<template>
  <div id="app">
    <HelloWorld :param="12345" />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld";

export default {
  name: "App",
  components: {
    HelloWorld
  }
};
</script>

HelloWorld.vue

<template>
  <p>{{ param }}</p>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    param: {
      type: Number,
      required: true
    }
  }
};
</script>

Vue.js 2.5.16

2 个答案: