Vue 组件道具的默认值以及如何检查用户是否没有设置道具？

Question

1. Vue 2中如何设置组件prop的默认值？比如有一个简单的 movies 组件可以这样使用：

 <movies year="2016"><movies>

Vue.component('movies', {
    props: ['year'],

    template: '#movies-template',
    ...
}

但是，如果用户没有指定 year ：

 <movies></movies>

那么组件将为 year 采用一些默认值。

2. 另外，检查用户是否没有设置道具的最佳方法是什么？这是一个好方法吗：

 if (this.year != null) {
    // do something
}

或者这个：

 if (!this.year) {
    // do something
}

？

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

Answer 1

Vue 允许您指定默认值 prop 值和 type 直接，通过使道具成为对象（参见： https ://vuejs. components.html#Prop-Validation ）：

 props: {
  year: {
    default: 2016,
    type: Number
  }
}

如果传递了错误的类型，则会引发错误并将其记录在控制台中，这是小提琴：

https://jsfiddle.net/cexbqe2q/

原文由 craig_h 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这是一个老问题，但关于问题的第二部分 - 你如何检查用户是否设置/没有设置道具？

检查 this 在组件内，我们有 this.$options.propsData 。如果 prop 存在于此，则用户已明确设置它；不显示默认值。

这在您无法真正将您的值与其默认值进行比较的情况下很有用，例如，如果 prop 是一个函数。

原文由 aurumpotestasest 发布，翻译遵循 CC BY-SA 3.0 许可协议