데이터 전달 방식

Vue.js에서 기본으로 제공하는 데이터 전달 방식으로 두개를 꼽아 생각할 수 있다.

하나는 부모에서 자식으로 전달하는 방식인 Props와 자식에서 부모로 전달하는 Emit이다.

이 문서는 이를 정리하는 문서이다.

 

Props (부모에서 자식)

props 속성을 통해 부모 컴포넌트가 가진 데이터를 자식 컴포넌트로 전달해준다.

코드

/* 부모 컴포넌트 */
<div id="parentComponent">
	<child-component :age="age" :name="name"></child-component>
</div>

var parentComponent = {
	template: '#parentComponent',
	data: function() {
		return {
			age: '30',
			name: 'Jeon'
		}
	}
}

/* 자식 컴포넌트 */
<div id="childComponent">
	<p>내 이름은 {{ name }} 이다. 내 나이는 {{ age }}이다.</p>
</div>

var childComponent = {
	template: '#childComponent',
	props: {
		name: {
			type: String
		}, 
		age: {
			type: Number,
			default: 0
		}
	}
}

부모컴포넌트에서 : (v-bind) 를 통해서 받은 값으로 자식컴포넌트에서 사용 가능하다.

단, props로 받은 값은 자식 컴포넌트에서 수정이 불가하다.

 

• 타입을 정해주면 유효성이 검증되기 때문에 주로 사용한다.
• props 명은 자식컴포넌트에서는 carmelCase을 사용하며 부모컴포넌트의 템플릿 안에서는 kebab-case을 사용한다. (Vue.js 공식 추천 네이밍 방법)

---

Emit (자식에서 부모)

emit을 통해 자식 컴포넌트에서 부모 컴포넌트로 값을 전달해준다.

코드

/* 자식 컴포넌트 */
<div id="childComponent">
	<button type="button" @click="emitParent">부모로 이름 보내기</button>
</div>

var childComponent = {
	template: '#childComponent',
	data: function() {
		return {
			name: '홍길동'
		}
	},
	methods: {
		emitParent: function() {
			this.$emit('child-click', this.name);
			// 부모의 child-click 이벤트로 this.name을 받는다. 
		}
	}
}

/* 부모컴포넌트 */
<div id="parentComponent">
	<h1>내 이름은 {{ name }} 이다.</h1>
	<child-component @child-click="getChildName(value)"></child-component>
</div>

var parentComponent = {
	template: '#parentComponent',
	data: function() {
		return {
			name: null
		}
	},
	methods: {
		getChildName: function(value) {
			this.name = value;
		}
	}
}

emit 방식의 경우 자식에서 어떠한 액션으로 이벤트를 통해서 데이터를 보낸다.

부모컴포넌트에서 이를 @ (v-on)으로 자식에서 선언된 이벤트로 받아서 부모에서 정의된 메소드에 연결되는 방식으로 진행된다.

 

자식에서 전달해주는 데이터가 없다면 value부분을 제외하고 쓰면 된다.

Vue.js의 템플릿(html)내에서는 kabab-case를 지원하기 때문에 자식에서 부모로 emit을 할때는 kabab-case로 작성한다.

---

Event bus

위의 두가지 방식에도 불구하고 컴포넌트간 데이터 전달 방식에서 우리는 갈증을 느낀다.

너무 폐쇄적이며 또한 부모에서 자식..자식...자식 수많은 부모와 자식이 생겨나면서

서로간 알아야 할 데이터들이 많아지기 때문이다.

이럴때 어디 한군데 수정하게 되면 연쇄적으로 여러군데를 수정해야하는 경우가 생긴다.

결국 우리에게 닥칠 상황은 휴먼 에러😢...

그렇게해서 나온 전달방식이 Event Bus🚌인 것이다.

 

Event bus는 빈 컴포넌트를 하나를 만든다.

그리고 그 안에 내가 원하는 값을 넣어서 다른 곳에서도 동적으로 가져와 사용할 수 있다.

즉, 부모 + 자식 또는 자식 + 자식간에도 주고 받을 수 있다는 말이다.

코드

EventBus.$emit(이벤트이름, 값) : 이벤트 트리거 (이벤트 시)
EventBus.$on(이벤트이름, 데이터) : 이벤트 감지 (created에 붙이기)

Event bus를 만드는 방법은 다음과 같다.

 

1. Event bus 컴포넌트를 만든다.
2. Event bus가 필요한 컴포넌트에서 import 시킨다.
3. $on, $emit으로 해당 Event bus에 이벤트를 담고, 감지하여 쓴다.

 

📢Tip

Event bus내에 this는 Event bus컴포넌트를 뜻한다.

그렇기 때문에 Event bus 위에서 this를 변수에 담아 써야한다. (아래 예시)

var self = this;
EventBus.$emit('eventBus', (payload) => {
	self.msg = payload;
});

참고

• https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=dktmrorl&logNo=222080919891
• https://kdinner.tistory.com/53

Vue - Event Bus 사용법

 

 

*좋아요와 댓글은 힘이 됩니다.