[emit] 자식 컴포넌트에서 부모 컴포넌트로 데이터 전달 (feat. script setup)

script setup부분에서 emit을 어떻게 사용하는지가 관건이다.

 

사용 방법 :

1. 자식 컴포넌트에서 defineEmits을 import해준다. 

import { defineEmits } from "vue";

 

2. emit을 선언해준다.

const emit = defineEmits(['select']);

emit('select', {

  selectedHighway: selectedHighway.value, 

  selectedRestarea: selectedRestarea.value

});

3. 부모 컴포넌트에서 자식 컴포넌트를 import할 때 emit을 받아온다.

<CategoryComponent @select="getData"/>

 

@뒤에 있는 문구는 자식 컴포넌트의 emit 변수명이다.

함수는 아래 부모 컴포넌트에서 값을 받아올 함수명이다.

 

4. 부모 컴포넌트에서 아래 script를 적어준다.

 

let selectedHighway: string;

let selectedRestarea: string;

 

function getData(data: any) {

  selectedHighway = data.selectedHighway;

  selectedRestarea = data.selectedRestarea;

  //[test]  console.log(data.selectedRestarea);

}

참고로 필자는 typescript로 문서를 작성하기 때문에 타입을 지정해주었다.

 

끝.