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

2019-11-19 15:55:49

字體：大中小

來源：轉載

供稿：網友

在Vue項目中，我們經常把某個功能模塊封裝起來，形成組件，下次調用時非常方便，同時也是在一些循環中進行dom操作的一種較好方式。

本次我想以一個評價組件來說一下組件的事件和參數是怎樣傳遞的，如何完成的組件通訊。

示例如下：

這里先說一下組件設計思路：

明確整個功能場景，找出存在的事件操作，此例是一個簡單的評價功能，即點擊某一個星星時左邊以及當前為選中的黃色星，右邊為未選中的白色星。

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

至此一個劃分了三個組件：JudgeOf、JudgeStar、StarImg

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

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

總結一下：