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

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
}

？

159248 次浏览
小开
最佳答案

Vue允许您直接指定默认的 prop值和 type，通过使道具成为一个对象(参见: https://vuejs.org/guide/components.html#Prop-Validation) :

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

如果传递了错误的类型，那么它将抛出一个错误并将其记录到控制台中，下面是小提琴:

Https://jsfiddle.net/cexbqe2q/

小开

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

检查组件内的 this，我们有 this.$options.propsData。如果道具出现在这里，用户就会显式地设置它; 默认值不会显示。

这在你无法将你的值与默认值进行比较的情况下是非常有用的，例如，如果道具是一个函数的话。

小开

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

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

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

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

提交答案