Component Within Components

With Vue, you can also have a component inside the template of another Component, Let’s see an example of this to understand this.

Let’s say you are working on an application where you need to show a list of pending tasks on multiple places in your application.

Let’s create a simple HTML page with basic elements and we will take step by step from there.

Create a Simple List of Tasks

<div class="task-list">
    <h3>List Of Tasks</h3>
    <ul>
        <li>Go to Market<li>
        <li>Pick Up Kids</li>
        <li>Bring Milk</li>
        <li>Clean Garage</li>
    </ul>
</div>

This will show a list of tasks along with the Heading.

Livewire Component Library

Create a Task Component

We see that the li tag is getting repeated in the HTML, it can be handled better with the VueJS component, and also keeping the list of tasks in Vue will provide a more data-centric approach.

Host Laravel Application on DigitalOcean

Use coupon 5balloons on this Cloudways Affiliate URL to get special discount.
<div class="task-list">
    <h3>List Of Tasks</h3>
    <task v-for="task in tasks">{{task}}</task>
</div>
...
...
Vue.component('task',{
    template: `<li><slot></slot></li>`
});

let app = new Vue({
    el: '#app',
    data{
            tasks : ['Go to Market', 'Pick Up Kids', 'Bring Milk', 'Clean Garage']
        }
});

Here we have defined property named tasks in our Vue instance and have also defined a task component. Notice that we have used <slot></slot> inside our task component template. This means that whatever content is defined inside the task element will be slotted in the li tag.

This is great, but we can go a step further.

Component Within Component

Since we want the ability to put our task list on our multiple pages, wouldn’t it be great if we can do it with a simple <tasks-list></tasks-list>

Let’s create another component named tasks-list and move the data property inside it so that the data remains with the component instead of the root element.

   Vue.component('tasks-list', {
            template: `<div class="task-list">
                        <h3>List Of Tasks</h3>
                        <ul>
                            <task v-for="task in tasks">{{task}}</task>
                        </ul>
                       </div>`,
            data(){
                return{
                    tasks : ['Go to Market', 'Pick Up Kids', 'Bring Milk', 'Clean Garage']
                }
            }
    });

Here we have used the task component directly inside our tasks-list component. And to print, the list of tasks along with the heading all you have do is just use the following element on your page.

<task-list></task-list>

This should result in the following output.

component within components VueJS

That’s all about having Components within Component.

Join my VueJS Newsletter

As I advance in my Journey of learning VueJS, I will be working on different exercises and challenges. Subscribe to receive the latest tutorials (every week) directly in your inbox.

    I won't send you spam. Unsubscribe at any time.

    Powered By ConvertKit

    Site Footer