[VUE] $emit

📖 $emit이란

부모 컴포넌트에서 자식 컴포넌트로 데이터를 props 해줄 때
자식 컴포넌트에서 props 받은 값을 수정하고 싶을 때 사용

부모 컴포넌트

<자식컴포넌트 @참조="액션($event)" /> 
//실제로 $event를 괄호 속에 넣진 않음
// 참조 = 자식 컴포넌트의 @emit에서 작명된 이름을 써주면 됨
// $event는 자식컴포넌트에서 실어보낸 데이터를 지칭함

자식컴포넌트

<Element @emit("작명",데이터)></Element>

만약 emit을 method에서 함수로 쓰고 싶다면

methods : {
 함수() {
  this.emit("작명",데이터)
  }
}

Event bus

export const eventBus = new Vue(); // 
사용하고 싶은 곳에서 import eventBus from "/있는곳"

데이터 공유생성
eventBus.$emit("작명",공유하고싶은 데이터)

//데이터공유 받기 
eventbus.$on("작명한 네임",콜백함수)


//콜백함수는 arrowfunction으로 바로 표현하거나 
//methods의 this.함수명을 적어 콜백함수를 표현

ex) (data)=>{this.데이터 = data} 또는 


methods : {
 함수 (data) {
  this.데이터 = data
  }
}

//데이터공유 종료(삭제)
evnetbus.off("작명한 네임")