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

2020/11/16 07:21 · javascript ·  · 0评论

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

Vue允许您通过将props设为对象来直接指定默认proptype(请参阅:https : //vuejs.org/guide/components.html#Prop-Validation):

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

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

https://jsfiddle.net/cexbqe2q/

这是一个古老的问题,但是关于问题的第二部分-您如何检查用户是否设置了道具?

this在组件内部进行检查,我们有this.$options.propsData如果此处显示道具,则用户已明确设置它;默认值未显示。

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

本文地址:http://javascript.askforanswer.com/vuezujiandaojudemorenzhiyijiruhejianchayonghushifouweishezhidaoju.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!