使用Vue2.0怎么实现组件传值通讯

今天就跟大家聊聊有关使用Vue2.0怎么实现组件传值通讯，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

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  :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>

看完上述内容，你们对使用Vue2.0怎么实现组件传值通讯有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注亿速云行业资讯频道，感谢大家的支持。