好资源导航 » 文章资讯 » Vue header组件开发详解

Vue header组件开发详解

2023-09-17 07:45:07 518

一、header组件开发之数据的传递

1.App.vue引入组件

importheaderfrom'./components/header/header'

2.App.vue中注册组件

exportdefault{
components:{
v-header:header
}
}

3.使用组件

解释：:sell="sellerObj",这里就像一个函数传参一样把sell当成形参，sellerObj就是实参，那么父组件实参是怎么传给子组件的，通过什么传

4.父组件向子组件传递数据

在父组件中需要将sellerObj作为数据导出，子组件通过props从父组件中获得数据，且要指定数据类型

exportdefault{
props:{//子组件获取父组件数据
sell:{
type:Object//传递的类型
}
}
}

小结：

子组件在props中创建一个属性，用以接收父组件传过来的值
父组件中注册子组件
在子组件标签中添加子组件props中创建的属性
把需要传给子组件的值赋给该属性

5.调用数据

细节问题：

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加类名



以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
                    
                    
                
            
              
            
                                    上一篇
Django rest framework基本介绍与代码示例
                
                                    下一篇
Vue shopCart 组件开发详解
                            
            
            
                     
                热门推荐 
                                        1 六一祝贺文案祝福语简短  
                                        2 520送给女友祝福语简短  
                                        3 爸爸寿宴仪式祝福语简短  
                                        4 上级转岗祝福语大全简短  
                                        5 回归岗位文案祝福语简短  
                                        6 新婚伴娘祝福语致辞简短  
                                        7 姐妹毕业贺卡祝福语简短  
                                        8 结婚的祝福语小众简短  
                                        9 朋友夜晚祝福语简短幽默  
                                        10 读书祝福语女生短句简短  
                                        11 感谢同事新婚祝福语简短  
                                        12 感谢教官文案祝福语简短  
                                        13 员工聚会蛋糕祝福语简短  
                                        14 元宵发客户祝福语简短  
                                        15 给团队信心祝福语简短  
                                        16 医美的祝福语大全简短  
                                        17 异国姻缘的祝福语简短  
                                        18 兄妹拍照祝福语简短的话  
                     
            
            
                
                
                
            
        
        
        
            
                随机推荐
                
                                            
                            毕业祝福语老婆生日简短
                        
                                            
                            祝福语签名简短霸气女生
                        
                                            
                            新婚贺词祝福语创意简短
                        
                                            
                            孩子语音婚礼祝福语简短
                        
                                            
                            完成预算祝福语简短精辟
                        
                                            
                            自由 生日祝福语简短独特
                        
                                            
                            新郎朋友红包祝福语简短
                        
                                            
                            客户新房祝福语简短大气
                        
                                            
                            生日奶茶红包祝福语简短
                        
                                            
                            结婚伴娘祝福语简短精辟
                        
                                            
                            退休的祝福语简短精辟
                        
                                            
                            升学了祝福语简短句
                        
                                            
                            长辈请客祝福语简短精辟
                        
                                            
                            生日奥特曼可爱祝福语简短
                        
                                            
                            弟弟考上军校祝福语简短
                        
                                            
                            出车开工吉祥祝福语简短
                        
                                    
            
            

                 
                
                
            
        
    



    
        
        返回顶部
    
    
        
            
            3162201930
        
    
    
        
            
            czq8825@qq.com
        
    




    免责声明：网站资源来源于网络，如有侵权，请及时联系删除。
    Copyright © 2026 好资源导航网. All Rights Reserved.
    
        蜀ICP备2021004611号-4
        网站地图
        
    
    本站由慈云数据提供云计算服务