Vue2.0 組件傳值通訊的示例代碼

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

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

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