컴포넌트끼리 통신 방법 (props, event emit)

그간 공부했던 vue2 내용 정리하고 얼른 vue3로 넘어가야지 

 

 

컴포넌트간 통신 방식

컴포넌트는 기본적으로 고유한 데이터 유효범위를 갖는다.

그걸 서로 공유하려면 props라는 속성과, 이벤트를 활용하자

 

상위에서 하위로 전달 → props

하위에서 상위로 전달 → 이벤트

밑에 것들이 윗대가리들에게 이벤트를 해준다고 생각하자 ^_^

 

 

아 근데 이렇게 나눠두면 겁나 귀찮은데

그냥 다 하나로만 통신하면 안되나? ㅡㅡ

 

ㅇㅇ안됨

n방향 통신의 문제점 : 특정 상태, 데이터가 바꼈을 때 그로 인한 버그를 추적하기 어려움

통신 규칙(이벤트, props)이 생기면 추적이 쉬움

 

 

props

상위에서 하위로 이벤트를 발생시킴

 

(1) 데이터가 저장되어 있고 해당 데이터를 propsdata 이름으로 프롭스를 보냄

<app-header v-bind:propsdata="message"></app-header>
.
.
.
data: { message: '내 데이터를 받아라' }

 

(2) 정해진 곳(하위 컴포넌트)에서 가져올 수 있게됨

var appHeader = {
	props: ['propsdata']
}

 

message 속 내용들 바꾸면 propsdata 도 바뀐다. (뷰의 reactivity)

 

 

event emit

(1) 하위에서 상위로 이벤트(passEvent)를 발생시킴

var appHeader = {
	template: '<button v-on:click="passEvent">버튼</button>',
	methods: {
		passEvent: function() {
			this.$emit('메세지')
		}
	}
}

 

(2) 이벤트 받아오기 (상위 컴포넌트)

<app-header v-on:pass="logText" />

 

 

 

event, props로 같은 레벨 간의 통신 방법

같은 레벨이면 바로 전달하지 못해서 위로 올렸다가(event) 내림(props)

그러니까 맨 처음엔 emit 으로 올리고 props를 등록하고 받으면 된다 ^^