在Vue项目中,我们经常把某个功能模块封装起来,形成组件,下次调用时非常方便,同时也是在一些循环中进行dom操作的一种较好方式。
本次我想以一个评价组件来说一下组件的事件和参数是怎样传递的,如何完成的组件通讯。
示例如下:
这里先说一下组件设计思路:
明确整个功能场景,找出存在的事件操作,此例是一个简单的评价功能,即点击某一个星星时左边以及当前为选中的黄色星,右边为未选中的白色星。
确定可复用的组件,即具有重复操作的模块,这里明显的每一个星星为一个可复用组件, 其实还有个星星变成白色和黄色也是一个小组件,这种在具体写的时候觉得可以再分即可。
至此一个划分了三个组件:JudgeOf、JudgeStar、StarImg
这里需要明确的是,在大多数的组件通讯中,父组件往子组件传递的都是数据,子组件往父组件传递的才是事件,
我们姑且称父到子走的是一个数据流,子到父走的是一个事件流,了解这一点基本可以很好的了解组件通讯的情况。
JudgeOf组件:
基本的外框,循环starList构成三个评分选项。向子组件传递选项名字,和当前选项的索引
<template> <div> <div class="judge-modal" @click="cancel"></div> <div class="judge"> <br> <div class="text-center font16">评价</div> <judge-star v-for="item,index in starList" :key="index" @judge="judge" :name="item.name" :index="index" ></judge-star> <br> <div class="box container text-left"> <span class="icon-i"></span> 评价内容 </div> <div class="bgfff container font14"> <textarea placeholder="请输入您的评价,方便我们改进,谢谢!" type="textarea" class="textarea" rows="6" v-model="judgeTxt"></textarea> </div> <div class="container"> <br> <div class="btn btn_block text-center" @click="submit">提交</div> </div> </div> </div> </template> <script> import JudgeStar from './judgeStar.vue' export default{ data(){ return{ starList:[ {name:'服务态度',key:'evaluate.serviceStarLevel'}, {name:'责任感',key:'evaluate.dutyStarLevel'}, {name:'准时度',key:'evaluate.onTimeStarLevel'}, ], evaluate:[], judgeTxt:'' } }, components:{ JudgeStar }, computed:{ }, methods:{ cancel(){ this.$emit('cancel') }, submit(){ let data = ''; this.starList.forEach((val,index)=>{ data =`${val.key}:${this.evaluate[index]}` console.log(data) }); }, judge(data){ this.evaluate[data[0]]=data[1]; } } } </script>
JudgeStar组件:
在这里注册一个chooseIndex,当点击某一个星星时,StarImg组件emit当前星星的index,JudgeStar组件中接收此参数并赋值给chooseIndex,同时StarImg里面watch这个参数,大于index表明没有被选中,反之则为选中,
<template> <div class="flex_cont container"> <div class="flex_item name">{{name}}</div> <div class="flex_item"> <star-img @choose="choose" v-for="item,index in starArr" :key="index" :chooseIndex="chooseIndex" :index="index"></star-img> </div> </div> </template> <script> import StarImg from './starImg.vue' export default{ props:{ name:String, index:'' }, data(){ return{ chooseIndex:4, starArr:Array.from({ length: 5 }) } }, components:{ StarImg }, mounted(){ this.$emit('judge',[this.index,this.chooseIndex+1]); }, methods:{ choose(data){ this.chooseIndex = data; this.$emit('judge',[this.index,this.chooseIndex+1]); } } } </script>
StarImg组件:
观察chooseIndex值的变化
<template> <i style="margin: 0 3px;" :class="icon" @click="choose"></i> </template> <script> export default{ props:{ index:Number, //当前星星的索引 chooseIndex:Number //选中星星的索引 }, data(){ return{ icon:'icon-star' } }, watch:{ //大于index表明没有被选中,反之则为选中, chooseIndex:function () { if(this.chooseIndex>=this.index){ this.icon = 'icon-star' } else { this.icon = 'icon-star2' } }, }, methods:{ choose(){ /*所选星星最大索引*/ this.$emit('choose',this.index) } }, created(){ } } </script>
总结一下:
- 父组件通过v-bind:绑定参数传给子组件,子组件通过props接受这个参数。
- 在组件的最底层开始写事件,由最底层组件逐步向上$emit事件流,并携带相应参数,最后在父组件内完成总的数据处理。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
- 纪钧瀚《钢琴阅读时光 雨中书店聆听轻音乐》[FLAC/分轨][399.62MB]
- 证声音乐图书馆《走向自然 疗心爵士乐》[320K/MP3][87.4MB]
- 证声音乐图书馆《走向自然 疗心爵士乐》[FLAC/分轨][184.94MB]
- 陈慧娴.2018-Priscilla-Ism演唱会3CD(2024环球红馆40复刻系列)【环球】【WAV+CUE】
- 郑秀文.1999-我应该得到(国)【华纳】【WAV+CUE】
- 陈家慧.2011-钢琴酒吧2CD【龙吟唱片】【WAV+CUE】
- 证声音乐图书馆《雨季 蓝调吉他 Rainy Blues》[320K/MP3][45.01MB]
- 证声音乐图书馆《雨季 蓝调吉他 Rainy Blues》[FLAC/分轨][109.13MB]
- 赞多《序章》[320K/MP3][45.54MB]
- 许巍.2004-每一刻都是崭新的【步升大风】【WAV+CUE】
- 群星.2024-四方馆影视原声带【韶愔音乐】【FLAC分轨】
- 陈雷.1997-安锁咧【金圆唱片】【WAV+CUE】
- 关淑怡.2013-MY.FAVORITE.SK.3CD【环球】【WAV+CUE】
- Sweety.2006-花言乔语【丰华】【WAV+CUE】
- 李恕权.2003-回·20年全精选2CD【SONY】【WAV+CUE】