JavaScript에서 컴포넌트로 데이터 전달하기

상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 수 있습니다. 이를 위해 컴포넌트 태그에 데이터가 있는 속성을 작성해야 합니다. 예를 들어, 사용자의 이름과 성을 전달해 봅시다:

<template>
	<User name="john" surn="smit" />
</template>

이렇게 전달된 데이터를 프롭스라고 합니다. 컴포넌트가 이 데이터를 받기 위해서는, props 설정에 그 이름들을 나열해야 합니다:

<script>
	export default {
		props: ['name', 'surn'],
		data() {
			return {
				
			}
		}
	}
</script>

이제 전달된 데이터는 하위 컴포넌트의 템플릿에서 출력할 수 있습니다:

<template>
	{{ name }}
	{{ surn }}
</template>

Employee 컴포넌트에 직원의 이름, 성, 나이를 전달하세요.

Employee 컴포넌트 내부에서 각 프롭스를 별도의 태그에 출력하세요.