Vue.js - emit 관련

Vue.js 관련 글을 써보겠다고 하고,,

3개정도 올리고 아무것도 안했습니다.

생각나서 다시 써볼려고 합니다.

 

Vue.js에서는 emit을 이용해서 컴포넌트끼리 정보전송을 진행할 수 있습니다.
(자식 컴포넌트 → 부모 컴포넌트)

그리고 뷰에서 기본으로 제공하는 것이 있죠.

$emit을 사용하면 가능합니다.

<!-- 자식 컴포넌트 -->
this.$emit("이름", 데이터);

<!-- 부모 컴포넌트 -->
<div @이름="자바스크립트 코드"></div>

정말 간단하게 나타내면 이렇게 나타낼 수 있습니다.

 

이렇게만 알면 조금 아쉬우니깐

사용가능한 예시를 하나 들어보겠습니다.

자식 컴포넌트에서 이름이 업데이트 되면 부모 컴포넌트로 이름을 출력해보는 예제를 간단하게 해보겠습니다.

<template>
	<!-- 자식 컴포넌트 -->	
    ...
	
    <input v-model="newName"/>
    
    ...
    
</template>

<script>
	
    ...
    
    watch : {
    	newName() {
        	this.$emit('updateName', this.newName);
        },
    },
    
    ...
    
</script>

자식 컴포넌트에서는 이름을 입력받을 수 있게 했습니다.

그리고 watch를 이용해서 부모 컴포넌트로 넘길 수 있게 했습니다.

 

<template>
	<!-- 부모 컴포넌트 -->
	...
    
    <자식컴포넌트이름 @updateName="setName"></자식컴포넌트이름>
    
    ...

</template>

<script>
	
    ...
    
    data() {
    	return {
        	parentName : "",
        }
    },
    
    methods : {
    	setName(data) {
        	this.parentName = data;
           	// do next code!
        },
    },
    
    ...
    
</script>

부모 컴포넌트에서는 이름을 받을 수 있도록 했습니다.

그런 다음에는 본인이 원하는 코드를 추가하면 됩니다.

 

예시는 여기까지 하겠습니다.

 

 

보여드린 예시는 부모 컴포넌트와 자식 컴포넌트가 바로 붙어있을 때는 저렇게 할 수 있습니다.

하지만,, 많이 떨어져 있는 경우도 있을 수 있습니다!

그러면 매번 저런 코드를 추가해야 하는 걸까요... 그러기에는 불편하다는 생각을 할 수도 있습니다.

그럴 때 사용할 수 있는 방법이 있습니다.

 

저는 그 중에서 1가지를 설명해드리겠습니다.

외부 라이브러리인 mitt 라이브러리를 사용하면 편하게 컴포넌트끼리 데이터 전송이 가능합니다.

먼저 mitt 라이브러리를 설치하셔야 합니다.

npm install mitt

yarn add mitt

터미널 오픈 후 npm 혹은 yarn을 사용하여 추가하시면 됩니다.

그 후 뷰 프로젝트의 main.js파일을 수정합니다.

import { createApp } from 'vue'
import App from './App.vue'
import mitt from 'mitt'

let emitter = mitt();
let app = createApp(App);
app.config.globalProperties.emitter = emitter; // app.config.globalProperties : 글로벌 변수 보관함

app.mount('#app')

• app.config.globalProperties : 글로벌 변수 보관함이라고 생각하면 될 것 같다.
• 모든 컴포넌트에서 사용할 수 있는 변수를 등록할 수 있게 해줍니다.

 

main.js 파일까지도 수정을 완료하시면 이제 본인이 원하는 코드에 추가하시면 됩니다.

<!-- 데이터 보내는 곳 -->
this.emitter.emit('이름', 데이터);


<!-- 데이터 받는 곳 -->
this.emitter.on('이름', (a) => {
	console.log(a);	// 출력해보면 보낸 데이터가 출력된다.
});

이런 식으로 데이터 송신, 수신이 가능합니다.

 

예시로도 알아보겠습니다.

<template>
    <!-- 데이터를 보내는 컴포넌트-->
    ...
    
    <button @click="send">click</button>
    
    ...
    
</template>

<script>

    ...
    
    data() {
    	return {
        	newName : "aaa",
        }
    },    
    methods : {
    	this.emitter.emit('sendButton', this.newName);
    },
    
    ...
    
</script>

데이터를 보내는 쪽의 컴포넌트 구성입니다.

 

<template>
    <!-- 데이터를 받는 컴포넌트-->
    ...
    
    <button @click="send">click</button>
    
    ...
    
</template>

<script>

    ...
    
    data() {
    	return {
        	receivedName : "",
        }
    },    
    methods : {
    	this.emitter.on('sendButton', (a) => {
            this.receivedName = a;
            // do next code!
        });
    },
    
    ...
    
</script>

데이터를 받는 쪽의 컴포넌트 구성입니다.

역시 데이터를 받는 후 본인이 원하는 코드를 추가하면 됩니다.

 

 

이런 식으로 멀리 떨어져 있는 컴포넌트끼리도 data를 편하게 주고받는 방법을 알아봤습니다.

물론 이런 형식을 자주 쓰면 안됩니다.

그러면 코드가 굉장히 복잡해지고, 어디서 보내고 어디서 받는지 확인하기가 어려워지기 때문입니다.

그리고 이름도 항상 unique하게 작명하는 것도 어렵기 때문입니다.

그렇기 때문에 emitter는 적당히 사용하도록 합니다. ㅎㅎ

 

컴포넌트 간 데이터 전송이 활발하다면

차라리 Vuex를 활용하는 것도 하나의 방법이 될 수 있다고 합니다.

 

 

 

그래서 다음 포스트는 아마도 Vuex에 대해서 배워보는 시간이 될 것 같습니다.

 

그럼 포스트를 마칩니다.

 

 

 

 

출처 : 코딩애플 - 인스타그램을 만들며 배워보는 Vue.js 3 완벽 가이드