[Vue] #8 - 상위 컴포넌트로 데이터 전송 -> 자식이 부모데이터를 바꾸고 싶다면?

1. $emit() : 부모에게 메세지 주기

부모컴포넌트에서 쓴 자식태그에 @click넣어주기 -> but, 자식의 어딜 눌러도 click이벤트가 발생할 것임
==> 자식컴포넌트 안의 태그에

@click="$emit('작명데이터', 요청데이터)"

클릭하면 부모에게 메세지가 간다

2. @데이터="" : 부모가 메세지를 받는법

<Card @받은작명데이터=" 이안에 js 아무거나 적을 수 있음 " /> <Card @openModal="모달창열렸니=true" /> 하면 자식에게 모달창열렸니=true 메세지가 전송된다

3. $event : 부모가 자식이 보낸 데이터 쓰는 법

@openModal="모달창열렸니=true; clicked=$event"

자식에서 보낸 '요청한데이터'가 clicked로 전달돼서 openModal을 통해 다시 자식한테 보내준다.

3-1. $emit을 함수 안에서 사용하고 싶으면

methods : { 함수(){ this.$emit('openModal', this.원룸.id) } //데이터를 함수안에서 참조할 때는 this 필수! }