Vue에서 자식 컴포넌트 생성하기

컴포넌트 내부는 이전에 작업했던 기본 컴포넌트와 동일한 구조를 가집니다. 즉, 각 컴포넌트 파일에는 script 태그와 template 태그가 있을 것입니다.

예를 들어 User라는 이름의 컴포넌트를 만들어 봅시다. 해당 파일에 코드를 배치합니다:

<script>
	export default {
		data() {
			return {
				
			}
		}
	}
</script>

data 객체에는 일부 데이터를 배치할 수 있습니다:

<script>
	export default {
		data() {
			return {
				name: 'john'
			}
		}
	}
</script>

이 데이터는 컴포넌트의 템플릿에서 출력할 수 있습니다:

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

이제 우리가 생성한 컴포넌트를 기본 컴포넌트에 연결해 보겠습니다. 먼저 이를 가져옵니다:

<script>
	import User from './components/User.vue'
	
	export default {
		
	}
</script>

components 옵션에 그 이름을 등록합니다:

<script>
	import User from './components/User.vue'
	
	export default {
		components: {
			User
		}
	}
</script>

부모 컴포넌트의 템플릿에서 자식 컴포넌트의 템플릿을 출력할 수 있습니다. 이를 위해 컴포넌트 이름과 일치하는 태그를 작성해야 합니다. 해봅시다:

<template>
	<User />
</template>

Employee 컴포넌트를 만드세요. 이를 기본 컴포넌트에 연결하세요.