Vue emit 관련

주 사용 용도

하위컴포넌트에서 상위컴포넌트로 DATA전달 및 이벤트 발생 필요 시

사용 방법

예시 )

BoardList.vue ( 상위 컴포넌트 )BoardDetail.vue ( 하위 컴포넌트 )

1. BoardList에서 BoardDetail 컴포넌트를 import 함
2. BoardDetail 안에서 함수를 통해 해당 메소드 실행( this.$emit('event',data) )BoardList에서는}
3. <BoardDetail @event='test'>'''async test(data){console.log(data);

를 통해 메소드를 실행할 수 있다.

부모 요소

<children @costomInit="costom"/>

// 영역 methods 
costom(arg: number){
	console.log('자식 요소로부터 이벤트가 전달되었습니다 evt:'+arg)
} 

자식 요소

<button @click="sendEvent"/></button>

// 영역 methods 
sendEvent(){
  // $emit 매개변수 1, 2 
  // 매개변수 1은 이벤트 명 , 부모요소에서 @이벤트명으로 함수를 전달함.
  // 매개변수 2는 전달할 데이터 , 부모요소에서 실행되는 함수에서 매개변수로 받을 수 있다.
  const sendData = 1;
	this.$emit('costomInit',sendData );
}