Event Emit 구현에서 이벤트가 여러개의 경우
<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>이런식으로 작성하나요?
아니면 따로 좋은 작성방법이 있을까요?
매번 이벤트 추가할 때 마다 연결을 해줘야 하는게,
추적을 위해서 라고는 하지만 편리한지 모르겠습니다.
답변 2
0
안녕하세요, 여러 개의 이벤트의 경우 적어주신 코드 방식대로 작성합니다. 컴포넌트 간에 대화하는 방식으로 이벤트를 등록하는 건데요. 요건 컴포넌트 기반 프레임워크 중에 뷰가 가진 장점이에요. 리액트는 이벤트가 없어서 모든 걸 프롭스 콜백으로 처리해야 합니다. 그에 비해 훨씬 명시적인거죠. 컴포넌트로 관심사를 분리하기 때문에 어쩔 수 없이 발생하는 제약이라고 보시면 좋을 것 같아요 :)
0
안녕하세요, 인프런 AI 인턴이에요. 여러 개의 이벤트를 처리해야 할 경우에는 하나의 컴포넌트에서 여러 개의 이벤트를 emit 할 수 있어요. 방법은 말씀하신대로 따로 연결해주는 방법이 가장 일반적이에요.
예를 들어, sendEvent1, sendEvent2, sendEvent3 과 같이 여러 개의 이벤트를 정의한 후, 각각의 이벤트에 맞는 showAlert1, showAlert2, showAlert3 메소드를 만들어 주세요. 그리고 아래와 같이 작성하시면 됩니다.
v-on:refresh2=“showAlert2”
v-on:refresh3=“showAlert3”
이렇게 작성하면, refresh1, refresh2, refresh3 이벤트가 emit 되었을 때, 각각의 showAlert1, showAlert2, showAlert3 메소드가 실행될 거에요. 이 방법은 이벤트를 추가할 때 마다 연결을 해주어야 한다는 단점이 있지만, 이벤트를 따로 추적할 수 있어서 관리하기 편리합니다.
더 효율적으로 이벤트를 처리하기 위해서는 Vuex를 사용할 수도 있습니다. Vuex는 상태 관리 패턴과 라이브러리로서, 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 해줍니다. Vuex를 사용하면 컴포넌트 간의 이벤트 통신을 보다 간편하게 할 수 있고, 관련 코드들을 한 곳에서 관리할 수 있어요. Vuex에 대해서는 공식 문서나 인터넷에서 자세한 내용을 찾아보시면 좋을 것 같아요.
더 궁금한 점이 있다면 언제든지 물어보세요! 좋은 하루 되세요.
파일 생성 방법이 다른건가요?
0
39
1
개발 환경부터 만들고 싶은데 강의에 생략된건가요?
0
54
1
타입스크립트
0
46
1
Vue3에 대해
0
70
1
로컬이 안뜹니다..
0
110
1
Vue 개발자도구 timeline에 No events라 뜨는 문제
0
159
1
Parsing 오류
0
141
1
users 안 보임
0
155
1
vbc 단축키 질문
0
157
2
LEARN-VUE-JS 프로젝트 질문
1
242
1
yarn serve 를 실행하기 위한 조건이 있을까요?
0
440
1
volar(vue language features) 검색 안됨
0
877
3
안녕하세요 선생님 Event Emit 질문 드립니다.
2
427
1
다음 강의
1
270
2
같은 레벨 자식에서의 이벤트 핸들링 방법 문의
1
303
3
vue 개발자도구 refresh event 문제
1
534
2
vue 개발자도구에서의 timeline
1
513
2
target[prop] 질문
1
337
2
Vue 개발자 도구가 변경사항이 있나요?
2
976
2
윈도우 터미널에서 powershell 사용 비추 이유
1
639
2
defineProps, defineEmit, defineModel 차이
1
762
2
파일이름을 소문자로시작하는건 어떤경우인가요
1
249
1
v-if, v-show 어떤 경우에 사용하나요?
1
492
2
학생할인 쿠폰번호 오류
1
470
2