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

神乐神无2020-03-09

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
}

？

逆天L2020/03/09 23:39:42

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

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

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

2020/03/09 23:39:42

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

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

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

Newest Answer