注册组件后一致报这个错

Question

Answer 1

ustbhuangyi 2017-10-18 00:11:02

你试试 import Star，s 大写

• 提问者 一只码农 #1

  还是不行，之前饮用header组件一样的方式都好好的。我这个是vue2.0的，不知道是否有影响

Answer 2

ustbhuangyi 2017-10-17 00:29:23

发个代码截图吧

• 提问者 一只码农 #1

  我在问题里加了一张图片，麻烦老师看看，谢谢

• 提问者 一只码农 #2

  谢谢老师，刚鼓捣出来了，是我自己粗心了，在star文件外面写了一个star.vue的完整文件，在star文件夹里面写了一个star.vue空文件导致的，自己把自己坑了

Answer 3

提问者 一只码农 2017-10-17 00:15:50

<template>

  <div :class="starType">

   <span v-for="itemClass in itemClasses" :class="itemClass"></span>

  </div>

</template>

<script>

const LENGTH = 5;

const CLS_ON = "on";

const CLS_OFF = "off";

const CLS_HALF = "half";

export default {

props{

size: {

type: Number

},

score: {

type: Number

}

},

computed: {

starType() {

return "star-" + this.size;

},

itemClasses() {

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 scoped>

@import "../common/less/mixin.less";

  .star{

  font-size: 0;

  >.star-item{

display: inline-block;

background-repeat: no-repeat;

  }

  &.star-48{

>.star-item{

width: 20px;

height: 20px;

margin-right: 22px;

background-size: 20px 20px;

&:last-child{

margin-right: 0;

}

&.on{

.bg-image("star48_on");

}

&.off{

.bg-image("star48_off");

}

&.half{

.bg-image("star48_half");

}

}

  }

  &.star-36{

  >.star-item{

width: 15px;

height: 15px;

margin-right: 16px;

background-size: 15px 15px;

&:last-child{

margin-right: 0;

}

&.on{

.bg-image("star36_on");

}

&.off{

.bg-image("star36_off");

}

&.half{

.bg-image("star36_half");

}

}

  }

  &.star-24{

  >.star-item{

width: 10px;

height: 10px;

margin-right: 3px;

background-size: 10px 10px;

&:last-child{

margin-right: 0;

}

&.on{

.bg-image("star24_on");

}

&.off{

.bg-image("star24_off");

}

&.half{

.bg-image("star24_half");

}

}

  }

  }

</style>

Answer 4

ustbhuangyi 2017-10-16 23:55:49

你的 star.vue 组件怎么写的？

• 提问者 一只码农 #1

  <template>
    <div class="star" :class="starType">
    	<span v-for="itemClass in itemClasses" :class="itemClass" class="star-item"></span>
    </div>
  </template>
  
  <script>
  	const LENGTH = 5;
  	const CLS_ON = "on";
  	const CLS_OFF = "off";
  	const CLS_HALF = "half";
  	export default {
  		props{
  			size: {
  				type: Number
  			},
  			score: {
  				type: Number
  			}
  		},
  		computed: {
  			starType() {
  				return "star-" + this.size;
  			},
  			itemClasses() {
  				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>