Vue2.0 组件传值通讯的示例代码
程序员文章站
2022-05-14 19:17:02
在vue项目中,我们经常把某个功能模块封装起来,形成组件,下次调用时非常方便,同时也是在一些循环中进行dom操作的一种较好方式。
本次我想以一个评价组件来说一下组件的事件...
在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事件流,并携带相应参数,最后在父组件内完成总的数据处理。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。