[Vue] custom event

유지나·2023년 5월 4일
0

custom event
자식요소에서 부모요소의 데이터를 수정 요청을 보냄

==> $emit()

자식요소로 부터 데이터 변경 요청 받음

  1. 부모에게 데이터 변경 요청 메세지를 보냄
<h4 @click="$emit('openModal')">{{product.title}}</h4>
  1. 부모가 메세지 수신
    @작명한 요청메세지
<Card @openModal="모달열었니=true" />

자식요소로 부터 데이터 수신

1-1. 어떤 요소를 클릭했는지 정보를 같이 전달

<h4 @click="$emit('openModal', product.id)">{{product.title}}</h4>

2-1. 부모가 메세지와 자식이 보낸 데이터를 받음

<Card @openModal="모달열었니=true; selectd=$event" />

emit 함수안에서 선언하는 형식으로 변경

1-2. 어떤 요소를 클릭했는지 정보를 같이 전달

<h4 @click="modal">{{product.title}}</h4>


$emit('openModal', product.id)

2-2. 부모가 메세지와 데이터 수신

<Card @openModal="모달열었니=true; selectd=$event" />
profile
지르나르

0개의 댓글