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

新手上路,请多包涵

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 许可协议

阅读 342
2 个回答

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 许可协议

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

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

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题