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

更新時(shí)間：2017年08月01日 14:52:08 作者：Yunfly

本篇文章主要介紹了Vue2.0 組件傳值通訊的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

在Vue項(xiàng)目中，我們經(jīng)常把某個(gè)功能模塊封裝起來，形成組件，下次調(diào)用時(shí)非常方便，同時(shí)也是在一些循環(huán)中進(jìn)行dom操作的一種較好方式。

本次我想以一個(gè)評(píng)價(jià)組件來說一下組件的事件和參數(shù)是怎樣傳遞的，如何完成的組件通訊。

示例如下：

這里先說一下組件設(shè)計(jì)思路：

明確整個(gè)功能場(chǎng)景，找出存在的事件操作，此例是一個(gè)簡(jiǎn)單的評(píng)價(jià)功能，即點(diǎn)擊某一個(gè)星星時(shí)左邊以及當(dāng)前為選中的黃色星，右邊為未選中的白色星。

確定可復(fù)用的組件，即具有重復(fù)操作的模塊，這里明顯的每一個(gè)星星為一個(gè)可復(fù)用組件, 其實(shí)還有個(gè)星星變成白色和黃色也是一個(gè)小組件，這種在具體寫的時(shí)候覺得可以再分即可。

至此一個(gè)劃分了三個(gè)組件：JudgeOf、JudgeStar、StarImg

這里需要明確的是，在大多數(shù)的組件通訊中，父組件往子組件傳遞的都是數(shù)據(jù)，子組件往父組件傳遞的才是事件，
我們姑且稱父到子走的是一個(gè)數(shù)據(jù)流，子到父走的是一個(gè)事件流，了解這一點(diǎn)基本可以很好的了解組件通訊的情況。

JudgeOf組件：

基本的外框，循環(huán)starList構(gòu)成三個(gè)評(píng)分選項(xiàng)。向子組件傳遞選項(xiàng)名字，和當(dāng)前選項(xiàng)的索引

<template>
 <div>
 <div class="judge-modal" @click="cancel"></div>
 <div class="judge">
  <br>
  <div class="text-center font16">評(píng)價(jià)</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> 評(píng)價(jià)內(nèi)容
  </div>
  <div class="bgfff container font14">
  <textarea placeholder="請(qǐng)輸入您的評(píng)價(jià)，方便我們改進(jìn)，謝謝！" 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:'服務(wù)態(tài)度',key:'evaluate.serviceStarLevel'},
   {name:'責(zé)任感',key:'evaluate.dutyStarLevel'},
   {name:'準(zhǔn)時(shí)度',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組件：

在這里注冊(cè)一個(gè)chooseIndex，當(dāng)點(diǎn)擊某一個(gè)星星時(shí)，StarImg組件emit當(dāng)前星星的index，JudgeStar組件中接收此參數(shù)并賦值給chooseIndex，同時(shí)StarImg里面watch這個(gè)參數(shù)，大于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, //當(dāng)前星星的索引
  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>

總結(jié)一下：