今天就跟大家聊聊有关使用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怎么实现组件传值通讯有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注亿速云行业资讯频道，感谢大家的支持。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
