2.App.vue中注册组件
exportdefault{
components:{
v-header:header
}
}
3.使用组件
解释：:sell="sellerObj",这里就像一个函数传参一样把sell当成形参，sellerObj就是实参，那么父组件实参是怎么传给子组件的，通过什么传
4.父组件向子组件传递数据
在父组件中需要将sellerObj作为数据导出，子组件通过props从父组件中获得数据，且要指定数据类型
exportdefault{
props:{//子组件获取父组件数据
sell:{
type:Object//传递的类型
}
}
}
小结：
- 子组件在props中创建一个属性，用以接收父组件传过来的值
- 父组件中注册子组件
- 在子组件标签中添加子组件props中创建的属性
- 把需要传给子组件的值赋给该属性
5.调用数据
{{sell.name}}
{{sell.description+'/'+sell.deliveryTime+'分钟送达'}}
细节问题：
support绑定数据时加v-if='sell.supports'
理由：在我们通过axios获取数据前在父组件中创建了一个空的对象sellerObj先传给子组件，开始没有数据传送过去就会报错underfined，加上v-if，接受不到数据就不会解析，也就不会报错。
二、header组件弹出层（详情）
1.弹出遮罩层
(1)设置一个状态，判断该状态控制显示隐藏
data(){
return{
detailShow:false
}
}
(2)绑定点击事件,通过methods方法改变状态，控制显隐效果
methods:{
showDetails(){
this.detailShow=true
},
hideDetail(){
this.detailShow=false
}
}
2.星级评分
(1)绑定class控制星级大小的类型
//利用computed属性
computed:{
starSizeType(){//返回星级的大小类型48/36/24
return'star-'+this.size;
}
}
(2)遍历星星的数量
(3)定义常量控制每个星的状态
//类名用变量存起来
constLENGTH=5//星星长度
constCLS_ON='on'//全星
constCLS_HALF='half'//半星
constCLS_OFF='off'//空星
(4)通过计算判断每个span的类型
itemClasses(){//返回一个数组为每个span的类名（遍历）
letspanClassList=[];
//利用实参评分来判断有几颗全星，半星，空星
letscores=(Math.floor(this.score*2))/2
letintNum=Math.floor(scores);//全星个数
letHashalfNum=scores%1!==0//半星
for(vari=0;i
(5)通过动态绑定class来给span加类名
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。