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 コンポーネントを作成してください。それをメインコンポーネントに接続してください。