Креирање на детски компоненти во 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. Поврзете ја со главната компонента.