[Vue.js] Vue CLI 프로젝트 : 형제 컴포넌트로 데이터 전달하기 mitt 라이브러리 설치 (Vue 3.x)

[Vue.js] Vue CLI 프로젝트 : 형제 컴포넌트로 데이터 전달하기 mitt 라이브러리 설치 (Vue 3.x)

이전 글

2022.02.14 - [JS & Framework/vue.js] - [Vue.js] Vue CLI 프로젝트 : props, $emit 부모-자식 컴포넌트 간 Object 전달

2022.02.13 - [JS & Framework/vue.js] - [Vue.js] Vue CLI 프로젝트 : Props 데이터 수정하여 부모 컴포넌트에도 알리기 $emit()

2022.02.13 - [JS & Framework/vue.js] - [Vue.js] Vue CLI 프로젝트 : props의 활용

 

이번 글에서는 이벤트 버스를 통해 형제 컴포넌트로 데이터를 전달하는 방법에 대해 알아보겠습니다. 이전에 작성을 했던 Status.vue 파일의 컴포넌트를 App.vue 파일에 추가합니다.

 

App.vue 파일

App.vue 파일에 2개의 컴포넌트(Home.vue, Status.vue)를 추가했습니다. 

 

Status.vue 소스코드는 다음과 같습니다.

실행결과 : 부모 컴포넌트 아래에 인접한 태그인 형제 컴포넌트로 배치한 결과입니다.

이제 형제 컴포넌트간의 데이터 통신을 위해 mitt라는 라이브러리를 설치합니다. 

$ npm install mitt

 

다음 main.js 파일에서 Vue App에 mitt를 추가합니다.

Home.vue에서 형제 컴포넌트인 Status.vue로 데이터 전송을 위한 이벤트 발생 버튼을 추가합니다.

 

Home.vue 파일에 형제 컴포넌트로 데이터를 보내기 위한 버튼과 이벤트 추가

Home.vue 파일의 스크립트 부분에 메소드 sendToSibling을 추가합니다. emit 함수를 사용합니다. sibling 이라는 이름으로, this.user 데이터를 내보냅니다.

Status.vue 파일로 와서 형제 컴포넌트에 있는 user와 다른 user를 세팅합니다.

{ name : 'status, age : 25 } Object

 

mounted 옵션을 추가하고 emitter.on 함수를 사용해서 'sibling' 요청에 대해서 인자값은 user로 하여 Status.vue 컴포넌트의 user 정보를 형제 컴포넌트에서 넘어오는 데이터로 세팅하는 코드를 작성합니다.

Home.vue의 데이터를 수정하고 형제 컴포넌트로 데이터를 전송합니다.

Home.vue 형제 컴포넌트에서 보낸 데이터를 받은 다른 형제 컴포넌트인 Status.vue 의 user 데이터를 변경한 것을 확인할 수 있습니다.

 

이처럼 컴포넌트간에는 데이터를 자유롭게 주고 받을 수 있습니다.

---

오늘은 mitt 라이브러리를 사용해서 형제 컴포넌트간의 데이터를 전달하는 방법에 대해 알아보았습니다. 도움이 되셨다면 좋아요 꾹! 광고 꾹! 부탁드립니다! 저에겐 정말 큰 힘이 됩니다! 감사합니다!^^