Vue 组件 props 的默认值 &如何检查用户是否没有设置 prop？

javascript vue.js vue-component

2022-08-30 01:43:14

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

<movies year="2016"><movies>



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

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

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

<movies></movies>

然后组件将为 prop 取一些默认值。year

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

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

或者也许是这个：

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

?

答案 1

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

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

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

答案 2

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

在组件内进行检查，我们有.如果此处存在 prop，则用户已显式设置它;不显示默认值。thisthis.$options.propsData

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