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 компонентін жасаңыз. Оны негізгі компонентке қосыңыз.