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

Question

1. 如何在 Vue 2 中设置组件属性的默认值？比如有一个简单的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
}

?

Answer 1

Vue 允许您直接指定默认 prop 值和 type，方法是将 props 设为对象（参见：https://vuejs.org/guide/components.html#Prop-Validation）：

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

如果传递了错误的类型，则会抛出错误并将其记录在控制台中，这里是 fiddle:

https://jsfiddle.net/cexbqe2q/

Answer 2

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

在组件中检查 this，我们有 this.$options.propsData。如果此处存在 prop，则用户已明确设置它；未显示默认值。

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

Answer 3

还有一些重要的事情要在这里添加，为了设置数组和对象的默认值，我们必须使用 props 的默认函数：

propE: {
      type: Object,
      // Object or array defaults must be returned from
      // a factory function
      default: function () {
        return { message: 'hello' }
      }
    },

Answer 4

值得一提的是，您还可以像这样向每个 prop 添加自定义验证器函数，以确保传递的值符合您组件的特定要求：

props: {
  year: {
    type: Number,
    required: true
    validator (value) {
      return value > 2015
    }
  }
}

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

Default values for Vue component props & how to check if a user did not set the prop?

javascript

vue.js

vue-component