Question

我有一个组件

<score :totalScore="totalScore || 0"> </scrore>

分数通常设置为int，但有时分数没有任何值。在这些情况下，如何通过0来捕获此错误？

Answer 1

在“得分”组件中，像这样定义道具：

Vue.component('score', {
//...
props: {
    totalScore: {
        type: Number,
        default: 0
    }
},
//...
// optionally you could also define a computed property to set 0 by default
computed: {
    totalScoreInt(){
        return parseInt(this.totalScore) || 0;
    }
}    
//...
});

然后像这样使用它：

<score :total-score="totalScore"> </scrore>

此外，在模板中你不应该在camelCase中定义道具，你应该使用kebab-case，因为html属性不区分大小写，任何大写字符都被解释为小写。

请参阅文档：https://vuejs.org/v2/guide/components-props.html#Prop-Validation

小提琴：https://jsfiddle.net/thogrtyr/

Vuejs - 如果存在，则通过道具或零

1 个答案: