custom event

사용목적

props로 보낸 데이터는 수정금지(read-only임)
따라서 부모에 있는 데이터를 수정하고 싶을 땐 custom event를 사용 (데이터를 수정해달라는 메시지)

보내는 법

• 부모에게 메시지 보낼 때: $emit('작명', 데이터)
• $로 시작하는 건 Vue만의 특별한 변수

형식

<태그 @click="$emit('작명', 데이터)"></태그>
//데이터 없을 경우 ('작명')까지만 작성

예시

<h4 @click="$emit('cardModalOpen')">{{ item.title }}</h4>

받는 법

• 부모가 메시지 받을 때: @보낼때작명한거="수신하는 JS코드"
• 자식이 보낼때작명한거 이름의 메시지를 보내면 JS 실행해주셈
• 자식에게 받은 데이터는 $event라는 변수로 사용할 수 있음
  형식

<컴포넌트 @보낼때작명한거="실행할 JS 코드" />

예시

<TheCard @cardModalOpen="modalOpen = true" />
//modalOpen라는 변수는 따로 있음

//자식에게 받은 데이터가 있으며 사용하고 싶을 때
<컴포넌트 @cardModalOpen="console.log($event)" />
<컴포넌트 @cardModalOpen="temp = $event" />

$emit을 함수 안에서 사용할 경우

• this 필수!

methods: {
	함수(){
		this.$emit('작명');
	}
}

1. 자식은 $emit(작명, 전달할자료) 이렇게 부모에게 메세지를 보낼 수 있습니다. 부모까지 자료를 전달하고 싶으면 선택적으로 기입가능합니다.

2. 부모는 @작명="데이터변경하는JS코드" 이렇게 메세지를 수신해서 원하는 데이터를 변경하도록 코드를 짭니다.

자식: 엄빠 내 영역에 있는 컨텐츠를 클릭하면 실행하고 싶은 코드가 있는데 주도권이 엄빠한테 있어(주도권: props로만 전달 가능한 데이터)

엄빠: 알겠어. 원하는 연결고리명이 있니? 네가 연결고리명을 $emit으로 말할 때마다 엄빠가 실행해 주마.

자식: 알써 내가 연결고리명 정해 올게. 짜 ‘@click="$emit('cardModalOpen')’ 만들었어.
내 영역에 있는 컨텐츠를 클릭할 때마다 엄빠한테 $emit으로 cardModalOpen이라는 연결고리명을 보낼 테니까 그때마다 실행해 줘!!

엄빠: 알겠어. 우리 애기를 위해 우리 자리에 실행 코드를 적어놓을 자리를 만들어 놓을게. (뚱땅뚱땅) @modalOpen="실행하고 싶은 코드 자리“ 애기야, 엄빠 영역에 modalOpen이라고 자리 만들어놨으니까 애기 쪽에서 @click 하면 ”실행하고 싶은 코드 자리“에 있는 코드가 실행될 거야~

자식: 엄빠 고마웡