[Vue3] mitt 사용하기

vue 에서 데이터를 활용 할 때,

부모 -> 자식컴포넌트로 데이터를 이동 하고 싶을 때에는 props 기능을 사용 한다.

 

그런데, 하위 -> 상위 -> 상위 컴포넌트로 이동하고 싶거나 형제간에 데이터를 이동시키고 싶을 때에는 

props 기능을 사용 하지 못한다.

이렇게, 데이터를 부모-자식 관계에 종속되지 않고 보낼 수 있게 해주는 라이브러리가 mitt 이다.

mitt 는 emitter와 같음

 

1. mitt 설치하기

npm install mitt
혹은
yarn add mitt

 

 

2. 셋팅하기

 - main.js 파일에 작성

import mitt from 'mitt';  //mitt라이브러리를 import 함
const emitter = mitt();
const app = createApp(App);

app.config.globalProperties.emitter = emitter;

 

3. 사용 방식

 - 데이터를 보낼 컴포넌트의 methos 안에 emitter 함수 작성

// 데이터 혹은 이벤트 보내기

methods: {
  functionName() {
    this.emitter.emit('이름', '데이터');
  }
}

 - 데이터를 받을 컴포넌트의 mounted 안에 emitter 함수 작성

//데이터 혹은 이벤트 받기

mounted( {
  this.emitter.on('이름', (파라미터) => {
    실행할 코드 적기
  });
}

 

4. 사용 예제

- A컴포넌트에서 형제 컴포넌트인 B로 데이터를 보내고 싶다.

- A컴포넌트의 라디오버튼을 체크 하면 라디오버튼의 value 값이 B컴포넌트에서 출력 되도록 하자.

 

4-1. 보낼(A) 컴포넌트에서 함수 작성하기

 

 - input 태그 sodp @change 함수를 적용 한 뒤 methods에서 emitter 함수 작성

 - 라디오 버튼에서 변화한 값을 picked라는 변수에 받아서 보내기로 한다

 

4-2. 받을(B) 컴포넌트에서 함수 작성하기

 picked라는 변수에 담긴 데이터는 e라는 파라미터를 통해 출력 된다.

 

4-3. 결과

가까운 곳을 체크 하면 value가 그대로 출력 된다.

 

 

5. 근데 mitt를 많이 쓰면 코드가 지저분해 질 수 있어서 vuex를 많이 쓴다고 한다.

 

 

 

 

끗!