Event Emit 구현에서 이벤트가 여러개의 경우

Vue 3 시작하기

Event Emit 구현

해결된 질문

작성

640

<app-contents v-on:refresh="showAlert"></app-contents>

methods: {
  sendEvent() {
    this.$emit('refresh');
  }
}

강의 코드의 경우, 이벤트가 하나인데요.

여러개의 경우 어떻게 작성하는게 좋을까요?

예를 들어

methods: {
  sendEvent1() {
    this.$emit('refresh1');
  },
  sendEvent2() {
    this.$emit('refresh2');
  },
  sendEvent3() {
    this.$emit('refresh3');
  },
}

인경우

<app-contents 
  v-on:refresh1="showAlert1"
  v-on:refresh2="showAlert2"
  v-on:refresh3="showAlert3"
>
</app-contents>

이런식으로 작성하나요?

아니면 따로 좋은 작성방법이 있을까요?

매번 이벤트 추가할 때 마다 연결을 해줘야 하는게,

추적을 위해서 라고는 하지만 편리한지 모르겠습니다.

javascript vue.js vue-3

답변 2

장기효(캡틴판교)

지식공유자

안녕하세요, 여러 개의 이벤트의 경우 적어주신 코드 방식대로 작성합니다. 컴포넌트 간에 대화하는 방식으로 이벤트를 등록하는 건데요. 요건 컴포넌트 기반 프레임워크 중에 뷰가 가진 장점이에요. 리액트는 이벤트가 없어서 모든 걸 프롭스 콜백으로 처리해야 합니다. 그에 비해 훨씬 명시적인거죠. 컴포넌트로 관심사를 분리하기 때문에 어쩔 수 없이 발생하는 제약이라고 보시면 좋을 것 같아요 :)

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴이에요. 여러 개의 이벤트를 처리해야 할 경우에는 하나의 컴포넌트에서 여러 개의 이벤트를 emit 할 수 있어요. 방법은 말씀하신대로 따로 연결해주는 방법이 가장 일반적이에요.

예를 들어, sendEvent1, sendEvent2, sendEvent3 과 같이 여러 개의 이벤트를 정의한 후, 각각의 이벤트에 맞는 showAlert1, showAlert2, showAlert3 메소드를 만들어 주세요. 그리고 아래와 같이 작성하시면 됩니다.

v-on:refresh1=“showAlert1”
v-on:refresh2=“showAlert2”
v-on:refresh3=“showAlert3”

이렇게 작성하면, refresh1, refresh2, refresh3 이벤트가 emit 되었을 때, 각각의 showAlert1, showAlert2, showAlert3 메소드가 실행될 거에요. 이 방법은 이벤트를 추가할 때 마다 연결을 해주어야 한다는 단점이 있지만, 이벤트를 따로 추적할 수 있어서 관리하기 편리합니다.

더 효율적으로 이벤트를 처리하기 위해서는 Vuex를 사용할 수도 있습니다. Vuex는 상태 관리 패턴과 라이브러리로서, 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 해줍니다. Vuex를 사용하면 컴포넌트 간의 이벤트 통신을 보다 간편하게 할 수 있고, 관련 코드들을 한 곳에서 관리할 수 있어요. Vuex에 대해서는 공식 문서나 인터넷에서 자세한 내용을 찾아보시면 좋을 것 같아요.

더 궁금한 점이 있다면 언제든지 물어보세요! 좋은 하루 되세요.

인프런 커뮤니티 질문&답변

Event Emit 구현에서 이벤트가 여러개의 경우