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

小编典典

all

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
}

阅读 83

2022-08-02

共1个答案

小编典典

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

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

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

2022-08-02