커스텀이벤트 Custom Event

자식요소에서 부모요소까지 이벤트를 전달하고싶을때
자식은 부모의 데이터를 직접 수정할수없음
따라서 커스텀이벤트로 부모데이터를 수정해달라고 메세지를 보내는것

$emit() 을 쓰면 부모에게 메세지를 보낼수있다

제이쿼리에서 쓰는것처럼

$가 들어간다면 vue에서도 뭔가 특별한 변수임  

<div @click="$emit('작명',데이터)"> 

데이터에는 숫자,문자,오브젝트,어레이 다 들어갈수있음
쓰기싫거나 쓸거없으면 안써도됌 

ex)

자식 컴포넌트 template 안에서

<div @click="$emit('openModal')"> 

부모에게 메세지 발사!

부모 컴포넌트에서는 메세지를 수신하는 코드를 또 적어줘야함 자동으로 ㄴㄴ
부모 template에 자식 컴포넌트 써둔거 예를들어 <Card/>안에 코드 적어줌

@작명한거="요안에는자바스크립트아무거나쓸수있음" 

<Card @openModal="open=true;">   

몇번째 클릭한건지 알고싶을때

자식 컴포넌트에서는

<div @click="$emit('openModal',데이터.id)">

몇번째 id를 클릭한건지 id 데이터를 같이 보내줌
이 div를 누르면 데이터파일의 id담아서 부모한테 메세지 보내달라고 코드짠것 

부모 컴포넌트에서는

<Card @openModal="open=true; clicked= $event">  

자식이 보낸 데이터는 $event 변수에 담겨있음
또는 그냥 누른거=i 해도 되긴함 같은 i일때

$emit()안에 써둔 스크립트가 너무 길어서 그냥 이걸 함수안에서 쓰고싶다면?

자식컴포넌트의 script부분에

export default{
 methods:{
   send(){
     this.$emit('openModal',this.데이터.id)
   }
 }
}

이렇게 써놓고

<div @click="send"> 

쓰면 똑같이 작동!

methods 안의 함수에서는 this를 꼭 붙여줘야 에러가 안남

함수명은 한글로하면 에러남