如何为 VueJs Props 添加多种数据类型？

Question

当将不同的值传递给组件时，这个错误让我感到困惑。

原文由 Harsha Basnayake 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是我找到的解决方案。

 props: {
   value: [Number, String, Array]
}

原文由 Harsha Basnayake 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

带有管道的语法（ Number | String ），就像在接受的答案中提出的那样，实际上不起作用。这是带有示例的更详细的解决方案：

类型检查，不需要道具

使用以下语法类型检查道具：

 props: {
  username: {
    type: [ String, Number ]
  }
}

这是一个带有类型检查的属性的实时示例：

 Vue.config.devtools = false;
Vue.config.productionTip = false;

Vue.component('test-component', {
  name: 'TestComponent',
  props: {
    username: {
      type: [ String, Number ]
    }
  },
  template: `<div>username: {{ username }}</div>`
});

new Vue({ el: '#app' });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>

<div id="app">
  <!-- valid: String -->
  <test-component :username="'user 38'"></test-component>

  <!-- valid: Number -->
  <test-component :username="59"></test-component>

  <!-- valid: null is valid, it is not required -->
  <test-component :username="null"></test-component>

  <!-- valid: missing property is valid, it is not required -->
  <test-component></test-component>

  <!-- invalid: Array -->
  <test-component :username="['test', 456]"></test-component>
</div>

---

类型检查、必需的道具和自定义验证器

使用以下语法键入检查所需的属性以及自定义验证器。

 props: {
  username: {
    type: [ String, Number ],
    required: true, // optional
    validator: item => item !== '123' // optional
  }
}

这是一个必需属性和自定义验证器的实时示例：

 Vue.config.devtools = false;
Vue.config.productionTip = false;

Vue.component('test-component', {
  name: 'TestComponent',
  props: {
    username: {
      type: [ String, Number ],
      required: true,
      validator: item => item !== '123'
    }
  },
  template: `<div>username: {{ username }}</div>`
});

new Vue({ el: '#app' });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>

<div id="app">
  <!-- valid: String -->
  <test-component :username="'user 38'"></test-component>

  <!-- valid: Number -->
  <test-component :username="59"></test-component>

  <!-- invalid: Array -->
  <test-component :username="['test', 456]"></test-component>

  <!-- invalid: String, but disallowed by custom validator -->
  <test-component :username="'123'"></test-component>

  <!-- invalid: null property, it is required though -->
  <test-component :username="null"></test-component>

  <!-- invalid: missing required prop -->
  <test-component></test-component>
</div>

原文由 ssc-hrep3 发布，翻译遵循 CC BY-SA 4.0 许可协议