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

Question

1.如何在Vue 2中设置组件道具的默认值？例如,有一个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
}

？

Answer 1

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

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

如果传递了错误的类型,那么它会抛出一个错误并将其记录在控制台中,这里是小提琴:

https://jsfiddle.net/cexbqe2q/

Answer 2

这是一个老问题,但关于问题的第二部分 - 如何检查用户是否设置了支柱？

检查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
    }
  }
}