DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones AWS Cloud
by AWS Developer Relations
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones
AWS Cloud
by AWS Developer Relations
Securing Your Software Supply Chain with JFrog and Azure
Register Today

Trending

  • Top 10 Engineering KPIs Technical Leaders Should Know
  • SRE vs. DevOps
  • Structured Logging
  • How To Use Pandas and Matplotlib To Perform EDA In Python

Trending

  • Top 10 Engineering KPIs Technical Leaders Should Know
  • SRE vs. DevOps
  • Structured Logging
  • How To Use Pandas and Matplotlib To Perform EDA In Python
  1. DZone
  2. Data Engineering
  3. Data
  4. Vue Tutorial 7 - Components

Vue Tutorial 7 - Components

Łukasz Mądrzak user avatar by
Łukasz Mądrzak
CORE ·
Dec. 13, 19 · Tutorial
Like (4)
Save
Tweet
Share
17.28K Views

Join the DZone community and get the full member experience.

Join For Free


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

Click-counter component

Click-counter component

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

Creating multiple click-counter components

Creating multiple click-counter components

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

User-comment component

User-comment component

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.
app Data (computing)

Opinions expressed by DZone contributors are their own.

Trending

  • Top 10 Engineering KPIs Technical Leaders Should Know
  • SRE vs. DevOps
  • Structured Logging
  • How To Use Pandas and Matplotlib To Perform EDA In Python

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com

Let's be friends: