하위에서 상위 컴포넌트로 이벤트 전달하기 : $emit

이벤트를 발생시켜 상위 컴포넌트에 신호를 보내면 된다.

상위 컴포넌트에서 하위 컴포넌트의 특정 이벤트가 발생하기를 기다리고 있다가 하위 컴포넌트에서 특정 이벤트가 발생하면 상위 컴포넌트에서 해당 이벤트를 수신하여 상위 컴포넌트의 메서드를 호출한다.

이벤트 발생과 수신은 $emit()과 v-on: 속성을 사용하여 구현한다.

// 이벤트 발생
this.$emit('이벤트명')

$emit을 호출하면 괄호 안에 정의된 이벤트가 발생한다. 일반적으로 $emit()을 호출하는 위치는 하위 컴포넌트의 특정 메서드 내부이다.

따라서 $emit()을 호출할 때 사용하는 this는 하위 컴포넌트를 가리킨다.

// 이벤트 수신
<child-component v-on:이벤트명="상위 컴포넌트의 메서드명"></child-component>

호출한 이벤트는 하위 컴포넌트를 등록하는 태그에서 v-on: 으로 받는다. 하위 컴포넌트에서 발생한 이벤트명을 v-on: 속성에 지정하고, 속성의 값에 이벤트가 발생했을 때 호출될 상위 컴포넌트의 메서드를 지정한다.

<!DOCTYPE html>
<head>
  <title>Event emit</title>
</head>
<body>
  <div id="app">
    <child-component v-on:show-log="printText"></child-component2>
  </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    Vue.component('child-component', {
      template: '<button v-on:click="showLog">show</button>',
      methods: {
        showLog: function() {
          this.$emit('show-log')
        }
      }
    })

    var app = new Vue({
      el: '#app',
      data: {
        message: "Hello Vue! passed from Parent Component"
      },
      methods: {
        printText: function() {
          console.log('received an event')
        }
      }
    })
  </script>
</body>
</html>

<처리 과정>

1. show 버튼을 클릭하면 클릭 이벤트 v-on:click="showLog"에 따라 showLog() 메서드가 실행된다.

2. showLog() 메서드 안에 this.$emit('show-log')가 실행되면서 show-log 이벤트가 발생한다.

3. show-log 이벤트는 <child-component>에 정의한 v-on:show-log에 전달되고, v-on:show-log의 대상 메서드인 최상위 컴포넌트의 메서드 printText()가 실행된다.

4. printText()는 received an event라는 로그를 출력하는 메서드이므로 마지막으로 콘솔에 로그가 출력된다.

저작자표시 비영리 변경금지

'JavaScript > Vue' 카테고리의 다른 글

Vue router (0)	2022.06.06
같은 레벨의 컴포넌트 간 통신 (0)	2022.06.06
상위에서 하위 컴포넌트로 데이터 전달하기 : props (0)	2022.06.05
컴포넌트 간 통신과 유효 범위 (0)	2022.06.05
인스턴스 유효 범위와 지역 컴포넌트, 전역 컴포넌트 간 관계 (0)	2022.06.05

🐠붕어의 코딩 공부 기록🐠

하위에서 상위 컴포넌트로 이벤트 전달하기 : $emit

<처리 과정>

'JavaScript > Vue' 카테고리의 다른 글

댓글

티스토리툴바

하위에서 상위 컴포넌트로 이벤트 전달하기 : $emit

<처리 과정>

'JavaScript > Vue' 카테고리의 다른 글

관련글

댓글

티스토리툴바