[Vue] 상위 컴포넌트로 이벤트, 데이터 전달

하위컴포넌트 -> 상위컴포넌트로 이벤트&데이터 전달하기

 

---

1. 자식 컴포넌트의 이벤트 내용에 다음 내용 추가

this.$emit( ' 상위로 전달할 이벤트명 ' , 데이터 ) ;

 this.$emit('update',this.childTime);

이벤트명은 임의로 적어주고 데이터는 전달할 데이터

 

2. 상위컴포넌트의 <하위 컴포넌트>명시 부분에 이벤트 핸들러 추가

@하위에서 전달받을 이벤트명="전달받고 실행할 이벤트"

 <setTime @update="timeChanged"/>

실행할 이벤트는 상위 컴포넌트에서 명시하면 된다.

 timeChanged(childTime){ //전달받은 데이터
    console.log("이벤트전달");
	this.parentTime=childTime;
}

---

전체 예시 소스

하위 컴포넌트

<template>
    <div id="setTime">
    {{childTime}}
        <button class="minusBtn" @click='setValue' value="-5">-5분</button> 
    </div>
</template>

<script>
export default {
  name: 'setTime',
  data(){
    return{
        childTime:'',
    }
  },
  methods:{
    setValue(){
         this.$emit('update',this.time); //상위 컴포넌트에 이벤트, 데이터 전달
    },
  }
}
</script>

 

상위 컴포넌트

<template>
    <div id="managerMain">
        <div>현재 {{time}} 분</div>
            <setTime @update="timeChanged"/> //이벤트 명시
    </div>
</template>


<script>
import setTime from '@/components/manager_setTime.vue'

export default {
   name: 'managerMain',
   components: {
    setTime
   },
   data(){
    return{
        parentTime:''
    }
   },
   methods:{
    timeChanged(childTime){ //전달받은 데이터
    console.log("이벤트전달");
        this.parentTime=childTime;
    }
   }
}

</script>