VueJS Components Tutorial : PART A

 VueJS Components Tutorial

Welcome to my second guide on VueJS – VueJS Components Tutorial. This guide is the second of a series of Vue.JS tutorials. If you missed the first part you are welcome to check it out at Vue JS Tutorial For Beginners. In this tutorial, we are going to get to the fine details in the subject of VueJS components.
To begin with, keep in mind that VueJS Components are reusable Vue instances with a name. We can use those components across our vue app.

Vue JS Tutorial For Beginners: VueJS Components Tutorial

So without further delay, let’s get down to our VueJS Components Tutorial!
In order to understand VueJs Components lets imagine the following scenario:
You are building an app for ordering a taxi online. You know for a fact you will have for example 2 repetitive buttons that will present themselves several times across your app. For our example, we will say these buttons are NEXT and BACK. Well, you either go ahead write the code for these buttons on multiple sections across your app to make them display on any reference point. OR you can create a VueJS Component that will “house” and create this button for you. The only thing that is required of you is just to call that components Vue instance.

VueJS component example

Take a look at the following simple example from Vue’s official documentation  to get the first clue about it:

Our VueJs

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

First thing, we create a Vue component with the syntax Vue.component() to initialize a new component. the first argument is the component’s name. The second argument is our component’s instance. think of it as an object with props, methods and so on.
data is always a function, this exists to let us return different values from different instances and to keep each Vue instance with its own copy of the way things are supposed to be.
template lets us provide an HTML markup to that specific vue component. Meaning it will be passed to the instance. The “INSTANCE” is the place in our app where we want to use the component by initializing a new Vue instance and make the magic happen.

Our HTML

<div id="components-demo">
    <button-counter></button-counter>
    <button-counter></button-counter>
    <button-counter></button-counter>
    <button-counter></button-counter>
</div>

This is pretty straightforward now: this is our HTML code, in order to get the VueJS to happen we need to initialize a new VueJs instance and to call it in our HTML by adding the component’s name. In this case inside of <tags> : <button-counter></button-counter>.

The last part

Calling it alone in our HTML won’t cut it. We need to initialize the Vue instance for this component. We do it in the following manner:

new Vue({ el: '#components-demo' })

the KEYWORD for initializing a new vueJS instance is, new Vue
As you see here it accepts an element to bind the component to. In our case its the div we created in our HTML code with an ID of #components-demo .
Now the following Vue component is bind to our HTML div with an ID of #components-demo. we initialize a new VueJS instance and inside that bound element, we call our button.
Wallah !
* a note: they will display INLINE! disregard the fact that they are blocks in the photo. I had to enlarge the screen to get you a nice example photo on my huge screen*

VueJS Components Tutorial

Example Two:

the following example is even a simpler one, without the use of the template property. A simple component to print out : <h1> Hi </h1>
Our HTML for the greeting:

<div id="hi-box">
    <say-hi></say-hi>
</div>

A DIV with an ID of #hi-box, same thing here, we call the  components name: say-hi within our bound element.
Our VueJs code for the greeting:

Vue.component('say-hi', {
    template: '<h1>Hi</h1>'
});

We create the component, called say-hi and give it a simple markup. If you got the hang of it you know what im going to do next.
Call the vue instance:

new Vue({ el: '#hi-box' })

The result

Vue JS Tutorial For Beginners

Vue Component Props

Another big part of Vue’s Components are props What are props? how do we use them? what do we use them for? THE KEY LINE OF THOUGHT HERE IS PASSING DATA
let’s have a rundown on a few key points of Vue’s component mechanism envolving VueJs Props.
Props in vueJs are a way to pass down attributes to HTML tags and more data to our markup. Props are written inside the Vue.Component under the declaration props:
furthermore, Props are custom attributes you can register on a component. When a value is passed to a prop attribute, it becomes a property on that component instance.Once a prop is registered, you can pass data to it as a custom attribute.

Vue.component('learn-props', {
  // PROPS
  props: ['postTitle'],
})

An important key feature to remember is that we can pass data to child components and other components with props.
Take a look at a new example, taken from vueJs documentation page:

Vue.component('blog-post', {
  props: ['title'],
  template: '<h3>{{ title }}</h3>'
})

What Happens There? Component creation with props and a template for the html markup. Once a prop is registered, you can pass data to it as a custom attribute, like this:

<blog-post title="My journey with Vue"></blog-post>
<blog-post title="Blogging with Vue"></blog-post>
<blog-post title="Why Vue is so fun"></blog-post>

The following block of code will print :
VueJS Components Tutorial
Now you can go ahead and pass your custom data to each one of these lines 🙂
We are going to close things up about VueJS Props in this tutorial, Don’t worry its not the end. An extensive tutorial will be written about Vue.JS Props.

Conclusion, Where do we go next?

  • Let’s summarize things: VueJS components are used across our app to save us the hustle of writing duplicate code.
  • Components provide us with build in ways of passing data(props, data, etc).
  • VueJS Components allow us to break down complex section into precise vue instances to complete tasks.
  • Components provide us the developers a huge power, flexibility, order, efficiency and more.

these are just some of the key points about components, the rest you will find out by yourselves 🙂
Well done to you who bore with me until the end of this  VueJS Components Tutorial. I hope this tutorial made things a bit clear regarding VueJs components.
We managed to cover the basics of components, templates, props and small key features. This tutorial on is part of the Vue JS Tutorial For Beginners: VueJS Components Tutorial, PART A.
PART B will continue where we left off and cover methods, mounted, computed and more. Stay tuned.
For refrenses please visit VueJS official doccumentation: VueJs

Vue JS Tutorial For Beginners

Leave a Reply

Your email address will not be published. Required fields are marked *