欢迎进入广州凡科互联网科技有限公司网站
全国服务热线
4000-399-000
个人怎么开发小程序_Vue2.0 组件传值通讯的示例代
时间: 2021-01-11 15:42 浏览次数:
Vue2.0 部件传值通信的实例编码 在Vue新项目中,大家常常把某一作用控制模块封裝起來,产生部件,下一次启用时十分便捷,同时也是在一些循环系统中开展dom实际操作的一种不错
Vue2.0 组件传值通讯的示例代码       本篇文章主要介绍了Vue2.0 组件传值通讯的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

在Vue项目中,我们经常把某个功能模块封装起来,形成组件,下次调用时非常方便,同时也是在一些循环中进行dom操作的一种较好方式。

本次我想以一个评价组件来说一下组件的事件和参数是怎样传递的,如何完成的组件通讯。

示例如下:


这里先说一下组件设计思路:

明确整个功能场景,找出存在的事件操作,此例是一个简单的评价功能,即点击某一个星星时左边以及当前为选中的黄色星,右边为未选中的白色星。

确定可复用的组件,即具有重复操作的模块,这里明显的每一个星星为一个可复用组件, 其实还有个星星变成白色和黄色也是一个小组件,这种在具体写的时候觉得可以再分即可。

至此一个划分了三个组件:JudgeOf、JudgeStar、StarImg

这里需要明确的是,在大多数的组件通讯中,父组件往子组件传递的都是数据,子组件往父组件传递的才是事件,
我们姑且称父到子走的是一个数据流,子到父走的是一个事件流,了解这一点基本可以很好的了解组件通讯的情况。

JudgeOf组件:

基本的外框,循环starList构成三个评分选项。向子组件传递选项名字,和当前选项的索引

 template 
 div 
 div @click="cancel" /div 
 div 
 div 评价 /div 
 judge-star v-for="item,index in starList" :key="index" @judge="judge" :name="item.name" :index="index" /judge-star 
 div 
 span /span 评价内容
 /div 
 div 
 textarea placeholder="请输入您的评价,方便我们改进,谢谢!" type="textarea" rows="6" v-model="judgeTxt" /textarea 
 /div 
 div 
 div @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 
 div {{name}} /div 
 div 
 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{
 pro凡科抠图:{
 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 : @click="choose" /i 
 /template 
 script 
export default{
 pro凡科抠图:{
 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:绑定参数传给子组件,子组件通过pro凡科抠图接受这个参数。 在组件的最底层开始写事件,由最底层组件逐步向上$emit事件流,并携带相应参数,最后在父组件内完成总的数据处理。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。




Copyright © 广州凡科互联网科技有限公司 版权所有 粤ICP备10235580号
全国服务电话:4000-399-000   传真:021-45545458
公司地址:广州市海珠区工业大道北67号凤凰创意园