今天就跟大家聊聊有關(guān)使用Vue2.0怎么實(shí)現(xiàn)組件傳值通訊，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

站在用戶的角度思考問(wèn)題，與客戶深入溝通，找到臨沭網(wǎng)站設(shè)計(jì)與臨沭網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：網(wǎng)站設(shè)計(jì)、做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、空間域名、網(wǎng)絡(luò)空間、企業(yè)郵箱。業(yè)務(wù)覆蓋臨沭地區(qū)。

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表明沒(méi)有被選中，反之則為選中，

<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, //當(dāng)前星星的索引
  chooseIndex:Number //選中星星的索引
 },
 data(){
  return{
   icon:'icon-star'
  }
 },
 watch:{
 //大于index表明沒(méi)有被選中，反之則為選中，
  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>

看完上述內(nèi)容，你們對(duì)使用Vue2.0怎么實(shí)現(xiàn)組件傳值通訊有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

網(wǎng)頁(yè)名稱：使用Vue2.0怎么實(shí)現(xiàn)組件傳值通訊
本文網(wǎng)址：http://chinadenli.net/article44/goecee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、網(wǎng)站制作、網(wǎng)站維護(hù)、營(yíng)銷型網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈、搜索引擎優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)