vuejs-传递属性(如果存在或为零)

在你的“得分”部分,定义道具如下:

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中定义props,而应使用kebab case,因为html属性不区分大小写,任何大写字符都解释为小写。

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

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