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，方法是将道具设为对象（请参阅：https://vuejs.org/guide/components.html#Prop-Validation）：

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

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

https://jsfiddle.net/cexbqe2q/

Answer 2

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

检查组件中的this，我们有this.$options.propsData。如果道具存在于此处，则用户已明确设置;默认值不会显示。

如果您无法将您的值与其默认值进行比较，则此功能非常有用，例如：如果道具是一个功能。

Answer 3

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

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

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

3 个答案: