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

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

 

etc-image-0

 

컴포넌트간 통신 방식

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

그걸 서로 공유하려면 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를 등록하고 받으면 된다 ^^

 

 

 

 

'🧠 저장 > Vue' 카테고리의 다른 글

axios 간단 정리  (0) 2023.12.13
router 간단 정리  (0) 2023.12.10
전역 컴포넌트, 지역 컴포넌트  (0) 2022.09.29
method 속성, computed 속성  (0) 2022.09.22
Vue 시작하기 + 기초 디렉티브(text, bind, model, if, for, on)  (0) 2022.09.20