Стварэнне даччыных кампанентаў у 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. Падключыце яго да асноўнага кампанента.