在header组件中应用satr组件 :size="36" :score="seller.score" 这里两个值为什么都是undefined???
header组件
<template>
<div>
<star :size="36" :score="seller.score"></star>
</div>
</template>
<script>
import star from '../star/star.vue';
export default{
components: {
'star': star
}
};
</script>
satr组件
<template>
<div class="star" :class="starType">
<span v-for="itemClass in itemClasses" :class="itemClass" class="star-item"></span>
</div>
</template>
<script type="text/ecmascript-6">
const LENGTH = 5;
const CLS_ON = 'on';
const CLS_HALF = 'half';
const CLS_OFF = 'off';
export default {
porps: {
size: {
type: Number
},
score: {
type: Number
}
},
computed: {
starType () {
console.log(this.size);
return 'star-' + this.size;
},
itemClasses () {
console.log(this.score);
let result = [];
let score = Math.floor(this.score * 2) / 2;
let hasDecimal = score % 1 !== 0;
let integer = Math.floor(score);
for (let i = 0; i < integer; i++) {
result.push(CLS_ON);
}
if (hasDecimal) {
result.push(CLS_HALF);
}
while (result.length < LENGTH) {
result.push(CLS_OFF);
}
return result;
}
}
};
</script>
<style>
</style>
试试props:['size','score'],or写反了应该是props吧