Vue Tutorial 7 - Components
Join the DZone community and get the full member experience.
Join For FreeGranny 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
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