1.如何在Vue 2中设置组件prop的默认值?例如,有一个movies
可以以这种方式使用的简单组件:
<movies year="2016"><movies>
Vue.component('movies', {
props: ['year'],
template: '#movies-template',
...
}
但是,如果用户未指定year
:
<movies></movies>
则组件将使用year
prop的一些默认值。
2.另外,检查用户是否未设置道具的最佳方法是什么?这是个好方法吗?
if (this.year != null) {
// do something
}
也许这:
if (!this.year) {
// do something
}
?
Vue
允许您通过将props设为对象来直接指定默认prop
值type
(请参阅: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 , vue-component , vue.js
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
文章标签:javascript , vue-component , vue.js
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
评论已关闭!