Vue | 컴포넌트간 데이터 전송 Custom Event, $emit, mitt

요약

자식 컴포넌트에서 부모 컴포넌트로 자료를 전송하려면 커스텀 이벤트를 사용해야 합니다.
사용 방법은 다음과 같습니다

• $emit('작명', 데이터) 내장 기능
• mitt 라이브러리 설치

$emit() 사용법

부모 컴포넌트 파일명 : App.vue
자식 컴포넌트 파일명 : Child.vue

$emit('작명', 데이터)

부모에게 보내기

<button @click="$emit('openView')">열기</button>

버튼 클릭했을 때 open 이라는 값을 상단 컴포넌트에 보냅니다,

자식에게 받은 값 사용

<Child @openView="자바스크립트코드" />

여기에 원하는 자바스크립트 코드를 작성할 수 있습니다.
변수값 = true 를 작성하거나 함수를 만드는 등의 기능을 작성할 수있습니다.

<Child @openView="변수값 = true; 숫자 = 1" />

말그대로 자바스크립트 코드를 추가할 수 있기 때문에 위와 같은 방법으로도 활용할 수 있습니다.

자식이 데이터 보내는 법

<button @click="$emit('작명' , 데이터)">발사</button>

클릭했을 때 작명 이름으로 된 데이터를 상위에 보내는 방법입니다.

<Child @openView="$event" />

자식이 보낸 값은 $event 변수에 들어가 있습니다.

default {methods} 에서 활용하기

<button @click="send">발사</button>

export default {
    name : 'childvue',
    props : {
            보낼값 : Object
        },
    methods : {
        send() {
            this.$emit('openView', 'this.보낼값'); 
        }
    }
}

• 주의 : 함수 안에서 데이터를 참조할 때 this. 를 붙여서 사용해야 합니다
  (props, data, $변수 모두 해당)

mitt 사용법

커스텀 이벤트(왼쪽) 은 단계별로 코드를 작성해야 하는 번거로움이 있습니다.
이를 해결하기 위해 mitt 를 활용하여 바로 원하는 컴포넌트에서 사용할 수 있게 됩니다.

npm install mitt

yarn add mitt

처음에 Vue 를 설치했을 때 사용한 방법으로 설치하면 됩니다.

초기설정

// mitt import
import mitt from 'mitt'

// 변수 설정
let emitter = mitt();
let app = createApp(App)

// 글로벌 변수 보관함
app.config.globalProperties.emitter = emitter;

main.js 에 위의 코드를 비교하여 붙여넣기 하면 됩니다.

선택사항

// createApp(App).mount('#app'); 
app.mount('#app'); // 위의 코드 대체 

let app 값에 createApp(App) 이 들어있으니 맨 하단의 코드를 요약할 수 있습니다.

app.config.globalProperties.axios = axios;

위와 같이 설정해 놓으면 vue 파일에서 import axios 할 필요 없이 this.axios 로 설정할 수 있습니다.

mitt 사용하기

<button @click="btn">버튼</button>

export default {
    name : 'childvue',
    methods : {
        fire() {
            this.emitter.emit('작명' , '데이터')
        }
    }
}

this.emitter.emit() 를 사용하여 자식 컴포넌트에서 데이터를 보냅니다.

export default {
    name : 'childvue',
    methods : {
        fire() {
            this.emitter.emit('작명' , '데이터')
        }
    },
    mounted() {
        this.emitter.on('작명' , (a)=>{
            console.log(a)
        });
    }
}

• default{} 에 mounted() 함수를 생성합니다
• this.emitter.emit() 으로 자료를 보냅니다
• this.emitter.on() 으로 값을 받아옵니다

큰 프로젝트는 Vuex를 사용하자

이러한 편리한 장점을 가지고 있지만 마구잡이로 사용하면 관리하기가 힘들어집니다.
이 때는 모든 컴포넌트들이 데이터를 주고받을 수 있는 Vuex를 활용하여 해결할 수 있습니다.
(흔히 말하는 state 관리, 리액트는 Redux 가 있음)

함수 안에 데이터를 넣을 땐 this

methods 에 들어있는 함수 데이터에는 반드시 .this 를 적용해야 함을 기억하세요