Vue.js - 하위 컴포넌트에서 상위 컴포넌트 통신 ($emit)

전에 포스팅들은 부모에서 자식으로 데이터를 전달하는 것을 알아봤습니다.

때로는 하위 컴포넌트에서 상위 컴포넌트로 데이터를 보내거나 메소드를 호출하기도 합니다.

 

하위 컴포넌트로 상위 컴포넌트의 이벤트를 발생하여 메소드를 호출해보도록 하겠습니다.

이벤트 발생과 수신은 $emit과 v-on 속성을 사용합니다.

 

---

1. 이벤트 발생 코드 형식

 

하위 컴포넌트의 메소드에 아래와 같이 코드를 작성합니다.

// 하위 컴포넌트의 내용
this.$emit('이벤트 명');

 

그리고 나서 해당 이벤트를 수신하기 위해 상위 컴포넌트의 HTML을 아래와 같이 구현합니다.

<!-- 상위 컴포넌트의 템플릿 -->
<div id="app">
  <child-component v-on:이벤트 명="상위 컴포넌트의 실행할 메서드 명 또는 연산"></child-component>
</div>

 

그럼 예시로 구현을 해보겠습니다.

---

 

2. 하위 컴포넌트 작성 (ChildEmit.vue)

 

하위 컴포넌트는 'Emit 클릭 !' 이라는 버튼을 클릭하면 sendEvent라는 함수를 호출하여 emit으로 부모 컴포넌트에 'update'라는 이벤트를 보내게 됩니다.

 

<template>
  <div>
    <h3>Emit : 하위컴포넌트 -> 상위컴포넌트</h3>
    <br><br>
    <button @click="sendEvent">
      Emit 클릭 !
    </button>
    <br><br>
  </div>
</template>

<script>
export default {
  name: 'ChildEmit',
  methods: {
    sendEvent () {
      this.$emit('update')
    }
  }
}
</script>

 

---

3. 상위 컴포넌트 (TestVueComponent.vue)

 

하위 컴포넌트에서 받은 이벤트 명을 수신하기 위해 v-on을 사용하여 이벤트명을 작성합니다.

그리고 상위 컴포넌트에서 실행해야할 메소드 명을 입력합니다.

 

하위 컴포넌트에서 받은 이벤트 명은 'update이며,

상위 컴포넌트에서 실행해야할 메소드는 'showAlert' 입니다.

 

<template>
  <div>
    <ul>
      <li><child-emit @update="showAlert" /></li>
    </ul>
  </div>
</template>

<script>
import ChildEmit from '@components/kim/ChildEmit'

export default {
  name: 'Child',
  components: {
    ChildEmit
  },
  methods: {
    showAlert () {
      alert('event received')
    }
  }
}
</script>

<style>
li {
  padding:20px;
  border-bottom:1px solid #aaa;
  text-align:center;
  cursor:pointer;
}
</style>

 

 

---

4. 구현 결과

 

하위 컴포넌트에서 이벤트를 발생하였고 컴포넌트는 이벤트를 수신하고 메소드를 정상적으로 실행시키는 것을 확인했습니다.

 

'Emit 클릭 !' 버튼을 클릭하면, showAlert 함수를 정상적으로 호출합니다.

 

 

짜잔

 

 

---

 

5. 하위 컴포넌트에서 상위 컴포넌트로 데이터 보내기

 

아래와 같은 형식으로 작성하면 됩니다.

-- 하위 컴포넌트
this.$emit('이벤트명', '파라미터')

 

- 하위 컴포넌트

<template>
  <div>
    <h3>Emit : 하위컴포넌트 -> 상위컴포넌트</h3>
    <br><br>
    <button @click="sendEvent">
      Emit 클릭 !
    </button>
    <br><br>
  </div>
</template>

<script>
export default {
  name: 'ChildEmit',
  methods: {
    sendEvent () {
      this.$emit('update', 'Emit Parameter')
    }
  }
}
</script>

 

 

- 상위 컴포넌트

 

상위 컴포넌트에서 실행하는 메소드에 파라미터만 입력해주면 됩니다.

<template>
  <div>
    <ul>
      <li><child-emit @update="showAlert" /></li>
    </ul>
  </div>
</template>

<script>
import ChildEmit from '@components/kim/ChildEmit'

export default {
  name: 'Child',
  components: {
    ChildEmit
  },
  methods: {
    showAlert (params) {
      alert('event received \nParamter : ' + params)
    }
  }
}
</script>

<style>
li {
  padding:20px;
  border-bottom:1px solid #aaa;
  text-align:center;
  cursor:pointer;
}
</style>

 

 

- 데이터 통신 결과

 

하위 컴포넌트에서 파라미터를 보낸 것이 정상적으로 출력되는 것을 확인하였습니다.

 

 

---