Tworzenie komponentów potomnych w Vue

Komponenty wewnątrz mają taką samą strukturę jak główny komponent, z którym pracowaliśmy wcześniej. Oznacza to, że w pliku każdego komponentu będą znaczniki script i template.

Dla przykładu zróbmy komponent o nazwie User. Umieśćmy jego kod w odpowiednim pliku:

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

W obiekcie data komponentu można umieścić jakieś dane:

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

Te dane można wyświetlić w widoku komponentu:

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

Teraz podłączmy utworzony przez nas komponent do głównego komponentu. Aby to zrobić, najpierw zaimportujmy go:

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

Wpiszmy jego nazwę w ustawieniu components:

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

W widoku komponentu nadrzędnego można wyświetlić widok komponentu potomnego. Aby to zrobić, należy napisać znacznik, którego nazwa odpowiada nazwie komponentu. Zróbmy to:

<template>
	<User />
</template>

Utwórz komponent Employee. Podłącz go do głównego komponentu.