Membuat Komponen Anak di Vue

Komponen di dalamnya memiliki struktur yang sama seperti komponen utama, yang kita gunakan sebelumnya. Artinya dalam file setiap komponen akan ada tag script dan template.

Mari kita buat contoh komponen dengan nama User. Letakkan kodenya di file yang sesuai:

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

Dalam objek data komponen, Anda bisa menempatkan beberapa data:

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

Data ini dapat ditampilkan di tampilan komponen:

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

Sekarang mari kita hubungkan komponen yang telah dibuat ke komponen utama. Untuk itu, pertama-tama impor komponen tersebut:

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

Tuliskan namanya di pengaturan components:

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

Dalam tampilan komponen induk, Anda dapat menampilkan tampilan komponen anak. Untuk melakukan ini, tulis tag yang namanya sesuai dengan nama komponen. Mari kita lakukan ini:

<template>
	<User />
</template>

Buatlah komponen Employee. Hubungkan ke komponen utama.