[Vue] custom event 하는 방법

custom evnet는?

 

App.vue에 있는 기능을 자식컴포넌트에서 가져다가 사용해야 할 경우

 

컴포넌트 기능이 이원화됨을 방지하기 위해 사용한다.

 

[사용 예시]

자식이 부모에게 요청할때

<h4 @click="$emit('작명', 데이터)">{{roomInformation[i].title}}</h4>

$emit() <-- 이 방식으로 사용하면 부모에 있는 기능을 가져올 수 있다. 다시말해 요청할 수 있다.

 

부모에 등록할때

<card @작명="modalOpen = true; userPush = $event" />

---

#1.  자식컴포넌트에서 모달창 뜨도록 기능 재수정하기

 

컴포넌트로 기능을 분리한 card.vue 파일에서 title태그만 클릭했을 때 모달창이 뜨고싶게 할 경우,

 

$emit() 을 사용한다.

#2. App.vue로 돌아와서 작명한 이름을 넣어준다.

 

@작명한이름 = " " <-- ""안에는 script또는 변경하고자 하는 기능을 삽입할 수 있다.

 

#3. 클릭했을 때 사용자가 클릭한 것에 맞는 이미지와 내용 띄우기

초기에 userPush로 사용자가 누른 값을 0으로 지정해놨다.

그런데 v-for문으로 변경했고 userPush의 값을 변수로 받아올 수 있다.