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

139

1.如何在Vue 2中为组件prop设置默认值？例如，有一个movies可以以这种方式使用的简单组件：

<movies year="2016"><movies>



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

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

但是，如果用户未指定year：

<movies></movies>

则组件将使用yearprop的一些默认值。

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

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

也许这：

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

？

javascript vue.js vue-component

— 佩拉·米卡
source

231

Vue允许您通过将props 设为对象来直接指定默认prop值type（请参阅：https : //vuejs.org/guide/components.html#Prop-Validation）：

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

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

— craig_h
source

2

第二个问题（这是更多的JavaScript问题）呢？检查用户是否未设置道具的最佳方法是什么？这是一个好方法吗？if (this.year != null) 或者也许是这样if (!this.year)？谢谢！

— PeraMika '16

1

如果设置默认值，除非将默认设置为，否则将始终设置prop null。如果那是您需要执行其他逻辑的方法，if (this.year != null)或者if (!this.year)是要走的路。

— craig_h

36

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

this在组件内部进行检查，我们有this.$options.propsData。如果此处显示道具，则用户已明确设置它；默认值未显示。

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

— 最乐观的
source