今天就跟大家聊聊有關使用Vue2.0怎么實現(xiàn)組件傳值通訊,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結了以下內(nèi)容,希望大家根據(jù)這篇文章可以有所收獲。
站在用戶的角度思考問題,與客戶深入溝通,找到臨沭網(wǎng)站設計與臨沭網(wǎng)站推廣的解決方案,憑借多年的經(jīng)驗,讓設計與互聯(lián)網(wǎng)技術結合,創(chuàng)造個性化、用戶體驗好的作品,建站類型包括:網(wǎng)站設計、做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、空間域名、網(wǎng)絡空間、企業(yè)郵箱。業(yè)務覆蓋臨沭地區(qū)。
JudgeOf組件:
基本的外框,循環(huán)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> 評價內(nèi)容 </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:'服務態(tài)度',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組件中接收此參數(shù)并賦值給chooseIndex,同時StarImg里面watch這個參數(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 :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>
看完上述內(nèi)容,你們對使用Vue2.0怎么實現(xiàn)組件傳值通訊有進一步的了解嗎?如果還想了解更多知識或者相關內(nèi)容,請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝大家的支持。
網(wǎng)頁名稱:使用Vue2.0怎么實現(xiàn)組件傳值通訊
本文網(wǎng)址:http://bm7419.com/article44/goecee.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供ChatGPT、網(wǎng)站制作、網(wǎng)站維護、營銷型網(wǎng)站建設、網(wǎng)站內(nèi)鏈、搜索引擎優(yōu)化
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉載內(nèi)容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)