Vue 2.0 구성 요소 전송 값 통신 의 예제 코드

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>

요약:

부모 구성 요 소 는 v-bin:바 인 딩 파 라 메 터 를 통 해 하위 구성 요소 에 전달 되 고 하위 구성 요 소 는 props 를 통 해 이 파 라 메 터 를 받 아들 입 니 다

4.567917.구성 요소 의 맨 밑 에 이 벤트 를 쓰기 시작 합 니 다.맨 밑 에 있 는 구성 요소 에서$emit 이벤트 흐름 을 점차적으로 올 리 고 해당 하 는 파 라 메 터 를 가지 고 마지막 으로 부모 구성 요소 에서 전체적인 데이터 처 리 를 완성 합 니 다이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.