$emit 하위에서 상위로 이벤트 전달하기

emit은 자식 컴포넌트에서 일어난 이벤트에 의해 부모의 데이터에 변화가 생긴 경우 사용한다.

다음 코드는, 모달창을 열고 닫는 코드이다.

//상위 컴포넌트

<script>
export default{
  data() {
    return {
      modal: false, //modal 값이 true이면 모달창이 팝업되고 false이면 닫힌다.
    };
  },
  
  methods:{
    modalToggle() {
      return (this.modal = !this.modal); //모달창을 열고 닫는 메소드이다.
    },
   }
}
</script>

this.$emit('실행할 부모 메소드 이름', 전달할 인자);

//모달창 컴포넌트로 하위 컴포넌트이다.

<template>
	//중략
  <input type="button" @click.prevent="close" value="닫기" /> //클릭이벤트 발생시 close메소드 실행
</template>
<script>

export default{
  methods: {
  //부모에게 이벤트발생 알리고 modalToggle()를 실행시킨다.
  	close() {
    		this.$emit("modalToggle");
        }
    }
}
</script>