Vue JS 2 Components within Components: Tutorial 5

By | September 1, 2021

Hello, Coders!! This article tutorial is about the Vue JS 2 Components within Components: Tutorial 5. Here we will learn to reference one component within another component.

In the previous tutorial, I had a single task but in this article, I will make a list of tasks by using the components within the components.

Here is the full code for Components within Components:

Index.html

<!DOCTYPE HTML>

<html>
	
	<head>

			<title></title>

	</head>

	<body>

		<div id="root">

			<task-list></task-list>

		</div>

		

		<script src="https://unpkg.com/vue@2.1.3/dist/vue.js"></script>

		<script src="vue-comonents-within-components/main.js"></script>

	</body>
</html>

main.js

Vue.component('task-list',{

	template: `<div>

					<task v-for="task in tasks">{{ task.task }}</task>

				</div>`,

	data() {
		return {
			tasks: [
				{task: 'Task 1', complete:false},	
				{task: 'Task 2', complete:true},	
				{task: 'Task 3', complete:false},	
				{task: 'Task 4', complete:true},	
			]
		};
	}

});

Vue.component('task',{

	template: '<li><slot></slot></li>'

});

new Vue({

	el: '#root'

})

Code Explanation:

In the above code from, index.html just focus on this below line.

<task-list></task-list>

This component would be responsible for creating sub-task components. so for that, I will create a new component. You can see the components in the below code.

Vue.component('task-list',{

	template: `<div>

					<task v-for="task in tasks">{{ task.task }}</task>

				</div>`,

	data() {
		return {
			tasks: [
				{task: 'Task 1', complete:false},	
				{task: 'Task 2', complete:true},	
				{task: 'Task 3', complete:false},	
				{task: 'Task 4', complete:true},	
			]
		};
	}

});

Here in the above code, I have passed the data as a custom property in tasks, The data is in the array of tasks. Each will contains the data with the true and false complete properties.

Here if you write only this below line in the template without adding any additional tags then it will not work and you will see the error in the Vue console.

<task v-for="task in tasks">{{ task.task }}</task>

in the template then it won’t work because whenever you have a template and a component it always needs to have a single root element. And in this case, I am using v-for I don’t have a single element. so for that, I have wrapped it with the div and it will work.

So wrap up this all is I have the task-list is not composed of list items here but an individual task. So to check the task component you will have a separate component for that.

Output:

vue-comonents-within-components output
vue-comonents-within-components output

You are done here so this article tutorial is about the Vue JS 2 Components within Components: Tutorial 5. Keep learning from the vue js 2 series tutorial. You can also check the previous tutorial from the series here Vue JS 2 Basic Components and template: Tutorial 4 Good Luck!

Category: PHP

About Pringal Gigaiya

Full-stack Web Developer & Freelancer Work with PHP MVC Frameworks like Laravel, CodeIgniter, Yii and also work with Python, Vue JS, Flutter.

Leave a Reply

Your email address will not be published. Required fields are marked *