小编典典

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
}

?


阅读 81

收藏
2022-08-02

共1个答案

小编典典

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

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

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

https://jsfiddle.net/cexbqe2q/

2022-08-02