By Per Harald Borgen
In my previous tutorial we learned the basics of Vue.js: the Vue instance, the template syntax, data object, directives, methods and more. This was enough to get started creating with very basic Vue examples.
Note: check out this playlist if you’re interested in watching all my Vue screencasts.
But if you want to build proper apps with Vue, you’ll need to learn about components. It’s one of the most powerful features of the library.
Components makes your code more reusable and your markup more readable.
They’ll let you create custom HTML elements, which will behave exactly how you want them to. To create a Vue.js component, do the following:
Vue.component('my-component', {
template: '<div>A custom component!</div>'
})
new Vue({
el: '#app'
})
The template key
is where you write your markup for that component. In the same object you’ll later add more functionalities. You create an instance of your component through adding <my-component></my-co
mponent> in the HTML:
<div id="app">
<my-component></my-component>
</div>
This will result in the following being rendered on the page:
Here is a Scrimba screencast explaining the same concept. It’s interactive, so you can pause the screencast and edit the code whenever you want.
Props
The component above doesn’t do much. To make it a bit more usable, let’s add props to it:
Vue.component('my-component', {
props: ['message'],
template: `<div>{{ message }}</div>`,
})
Props will enable you to pass data into a component instance from the outside of that component. Or more correctly, pass the data down from a parent.
The my-component
has one prop called message
, which it’ll render out. The value of message
will be defined when we create new instances of this component in the DOM. We can create as many my-component
’s as we want, and give each of them different props. Thus we’ll be able to re-use our code.
To pass data down as the message
prop, simply do the following:
<div id="app">
<my-component message="Hello from Vue.js!"></my-component>
</div>
Now, Hello from Vue.js! will be rendered on the page.
But this is still a very static solution, as we’ve hard coded the value of the prop in the HTML. A better solution would be to bind this value to a data source. Then we can change it how we want later on, like based upon user interactions or responses from API’s.
Let’s bind it to the data object on our Vue instance. First we’ll create the data object.
var app = new Vue({
el: '#app',
data: {
msg: 'Hello from the Vue instance'
}
})
To bind the prop in my-component
to the msg
in our Vue instance, we’ll use the v-bind
directive we learned in the previous article:
<div id="app">
<my-component v-bind:message="msg"></my-component>
</div>
Now, we can change the data through app.msg = 'Some new data'
and Vue will take care of updating the DOM with the new data.
Tip: You can remove the
v-bind
fromv-bind:message
and rather use the:message
shorthand.
Here is a Scrimba screencast explaining the concept:
But what if you want your component to be able to change its message
? This can’t happen as long as message
is a prop, as you should never mutate a prop inside a component. If you try to, Vue will give you a warning in the console.
Data
So we’ll need another way of handling data inside the component. This is where the data
function comes into play. It will allow your components to handle internal state, which you can change how you wants to.
Component data
fills the same role as the data
object in the Vue instance. They’re both places where you’ll hold mutable data. But, component data
is a function and not an object.
Let’s jump into the code, to make it less abstract.
Vue.component('my-component', {
template: '<div> {{ message }} </div>',
data: function() {
return {
message: 'Hello from Vue data!'
}
}
})
Here is a Scrimba screencast which explains the concept.
And that’s about it! There are of course many more things to learn about Vue components. But this should be enough for you to start playing around with it on your own.
If you learn something new about Vue, I’d recommend you to pass that knowledge on to others as well. That’s one of the best ways to learn, and the reason that communities like freeCodeCamp thrive.
So go ahead and write an article (or create a Scrimba screencast) about your what you’ve learned!