Vue에서 이벤트 발생시키기

이미 알고 계시듯이, 데이터는 부모 컴포넌트에서 자식 컴포넌트로 흐릅니다. 이제 자식 컴포넌트가 부모 컴포넌트와 어떻게 통신할 수 있는지 살펴보겠습니다. 이는 이벤트 발생을 통해 이루어집니다. 실제로 확인해 봅시다.

부모 컴포넌트에 다음과 같은 메서드가 있다고 가정해 보겠습니다:

methods: {
	func() {
		alert('xxx');
	}
}

이 메서드를 매개변수로 자식 컴포넌트에 전달하겠습니다:

<template>
	<User @show="func" />
</template>

발생시킬 이벤트를 emits 설정에 기입합니다:

export default {
	emits: ['show'],
	data() {
		return {
			
		}
	}
}

이제 자식 컴포넌트에서 클릭을 처리할 버튼을 만들어 보겠습니다:

<template>
	<button @click="handle">btn</button>
</template>

클릭 핸들러를 만듭니다:

methods: {
	handle() {
		
	}
}

이제 클릭 핸들러 내에서 부모 함수가 호출되도록 하겠습니다. 이를 위해 $emit 함수를 사용하여 이벤트를 발생시키고, 매개변수로 발생시킬 이벤트의 이름을 지정합니다:

methods: {
	handle() {
		this.$emit('show');
	}
}

자식 컴포넌트에 두 개의 함수를 전달하세요. 자식 컴포넌트에 두 개의 버튼을 만들고, 각 버튼이 전달된 함수 중 하나를 호출하도록 하세요.