[Vue] emit

emit

📌 정의

Vue.js에서 emit은 하위 컴포넌트에서 상위 컴포넌트로 이벤트를 전달하는 데 사용된다. 이것은 부모-자식 간 통신의 일부로서, 자식 컴포넌트에서 일어나는 이벤트를 부모 컴포넌트에서 감지하고 처리할 수 있게 해준다.

✍ 예시 코드

ChildComponent.vue (자식 컴포넌트)

<template>
  <button @click="notifyParent">Click me!</button>
</template>

<script>
export default {
  methods: {
    notifyParent() {
      // 이벤트를 발생시킵니다. 첫 번째 매개변수는 이벤트 이름이며,
      // 두 번째 매개변수는 전달할 데이터입니다.
      this.$emit('child-event', 'Hello from child!');
    }
  }
};
</script>

ParentComponent.vue (부모 컴포넌트)

<template>
  <div>
    <p>{{ messageFromChild }}</p>
    <!-- 자식 컴포넌트를 사용하고, 자식 컴포넌트에서 발생하는 이벤트를 감지합니다. -->
    <child-component @child-event="handleChildEvent"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      messageFromChild: ''
    };
  },
  methods: {
    handleChildEvent(message) {
      // 자식 컴포넌트로부터 전달된 이벤트를 처리합니다.
      this.messageFromChild = message;
    }
  }
};
</script>