Vue Tutorial 7 - Components

Granny is delighted! Your latest update of her web app really impressed her. She can now comfortably manage guests for her upcoming birthday party, knowing that she will not accidentally submit invalid data to the table, thanks to our frontend validation. However, she also mentioned something about reviewing your code and asked about the reusability of components within the app. This sent a chill down your spine. It’s time to learn about reusable Vue Components…

Vue Components

The more you program in Vue, the more thankful you will be for the Vue component system. Components are not very useful in small applications that we covered in this series of tutorials up to now. It is really important to understand how they work and what they are as they become very useful when building large applications, which you will inevitably face in your programming career.

You may also like: Vue.js 2 Authentication Tutorial, Part 1.

Components are small, self-contained, reusable objects that we can define and re-use in our app. Each component has a name and can be instantiated using that name. Here’s a simple example of a component that simply counts the number of times it has been clicked on.

// click-counter component
Vue.component('click-counter', {
    data: function () {
        return {
            count: 0
        }
    },
    template: '<button v-on:click="count++">Click count = {{ count }}</button>'
})

Watch out: Make sure you define the component before you instantiate your Vue app.

This component is called click-counter, which means we can instantiate it by that name in the app

<div id="components-app">
    <click-counter></click-counter>
</div>

The above app results in the following output

Since this component is reusable, we can instantiate it as many times as we please! Notice how each one of them maintains their own state.

<div id="components-app">
    <click-counter></click-counter>
    <click-counter></click-counter>
    <click-counter></click-counter>
</div>

The updated app results in the following output

You may have noticed that the component data is defined slightly differently to when we define it in a Vue app. If you recall, this is the typical way to define data:

data: {
  count: 0
}

However, in order to maintain an independent state for each instance of the component, it’s required that data is defined as a function.

Passing Data into a Component

Let’s assume we would like to implement a blog feature on a website where users can comment on a post. Let’s also assume that we have the list of comments stored in the data like this:

var app = new Vue({
    el: '#comments-app',
    data: {
        comments: [
            {id: 1, name: "Jerry", content: "I love Vue so much"},
            {id: 2, name: "Eric", content: "Vue.js solved all my relationship problems"},
            {id: 3, name: "Sandra", content: "I'm currently on the beach coding Vue as we speak!"},
        ]
    }
})

In this scenario, it would make sense to implement a user-comment component. This is how we could go about it.

Vue.component('user-comment', {
   template: '<div><p class="font-weight-bold">{{ comment.name }} said:</p><p>{{ comment.content }}</p></div>'
})

We’d quickly discover that we don’t know how to pass data to components! Not to worry, this can be achieved using props.

Props are custom arguments you can define in the component. If you worked with React before, you will recognize the term props. It has the very same meaning in Vue. To add props to the user-comment component we add props element as follows

Vue.component('user-comment', {
    props: ['comment'],
    template: '<div><p class="font-weight-bold">{{ comment.name }} said:</p><p>{{ comment.content }}</p></div>'
})

The one last thing we must do is to display the comments in some way. You can probably guess that it will somehow involve the v-for directive. Here’s how we can do it:

<user-comment
        v-for="comment in comments"
        v-bind:comment="comment"
        v-bind:key="comment.id"
>
</user-comment>

This is the result of our work

Conclusion

We have successfully created a component and passed data down to it using props. This means we are a step closer to being able to code large applications consisting of reusable components and separating out the concerns of each element.

The code for this tutorial is available here.

Note: You can find parts one, two, three, four, five, and six of this series at their respective links.

Further Reading

• Vue Development in 2019: What You Need to Know.
• Get Started With Vue Grid in 5 Minutes.
• Everything React: Tutorials for Beginners and Experts Alike.