We now have a youtube channel. Subscribe!

Vue.js | Components

Vue.js Components


Hello folks! welcome back to a new edition of our Vue.js tutorial. In this tutorial, we will be studying about Vue.js Components.

Vue.js components are one of the important features of Vue.js used for creating custom elements, which can be reused in HTML.

Let's work with an example and then create a component, that's going to provide us with a better understanding on how components works with Vue.js.

Example

Following is a simple example -

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "component_test">
         <testcomponent></testcomponent>
      </div>
      <div id = "component_test1">
         <testcomponent></testcomponent>
      </div>
      <script type = "text/javascript" src = "js/vue_component.js"></script>
   </body>
</html>

vue_component.js.

Vue.component('testcomponent',{
   template : '<div><h1>This is coming from component</h1></div>'
});
var vm = new Vue({
   el: '#component_test'
});
var vm1 = new Vue({
   el: '#component_test1'
});

In the .html file, we've created two divs with id component_test and component_test1. In the .js files shown above, two vue instances are created using the div ids. We've created a common component to be used with both the view instances.

Syntax

The following below is the syntax to create a component -

Vue.component('nameofthecomponent',{ // options});

Soon as a component is created, the name of the component instantly comes to be the custom element and the same can be used in the Vue instance element created, that is inside the div with ids component_test and component_test1.

In the .js files, we have made use of a test component as the name of the component and the same name is used as the custom element inside the divs.

Example

Following is a simple example -

<div id = "component_test">
   <testcomponent></testcomponent>
</div>
<div id = "component_test1">
   <testcomponent></testcomponent>
</div>

In the component created in the .js file, we have included a template to which we have assigned a HTML code. This is a method of recording a global component, which can be made a part of any Vue instance as shown in the following script -

Vue.component('testcomponent',{
   template : '<div><h1>This is coming from component</h1></div>'
});

On execution, the same will be reflected in the browser.



The components are given custom element tag, i.e. <testcomponent></testcomponent>. Nevertheless, when we inspect the same in the browser, we'll not notice the custom tag in plain HTML available in the template as shown in the following screenshot -


We have directly made the components a part of vue instance as shown in the script below.

var vm = new Vue({
   el: '#component_test',
   components:{
      'testcomponent': {
         template : '<div><h1>This is coming from component</h1></div>'
      }
   }
});

This is known as local registration and the component is going to be a part of only the vue instance created.

So far, we have seen the basic component with the basic options. Now, let's add some more options such as data and methods to it. Like vue instance has data and methods, component also share the same. Hence, we will extend the code, which we have already seen in data and methods.

Example

Following is a simple example -

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "component_test">
         <testcomponent></testcomponent>
      </div>
      <div id = "component_test1">
         <testcomponent></testcomponent>
      </div>
      <script type = "text/javascript" src = "js/vue_component.js"></script>
   </body>
</html>

vue_component.js

Vue.component('testcomponent',{
   template : '<div v-on:mouseover = "changename()" v-on:mouseout = "originalname();"><h1>Custom Component created by <span id = "name">{{name}}</span></h1></div>',
   data: function() {
      return {
         name : "Kennedy"
      }
   },
   methods:{
      changename : function() {
         this.name = "Bethel";
      },
      originalname: function() {
         this.name = "Kennedy";
      }
   }
});
var vm = new Vue({
   el: '#component_test'
});
var vm1 = new Vue({
   el: '#component_test1'
});

In the .js file, we have included data that's a function, which returns an object. The object has a name property, which is assigned the value Kennedy. This is used in the following template.

template : '<div v-on:mouseover = "changename()" v-on:mouseout = "originalname();"><h1>Custom Component created by <span id = "name">{{name}}</span></h1></div>',

Notwithstanding having data as a function in components, we can utilize its properties the same manner as we use with direct Vue instance. Also, there are two methods which are included, changename and originalname. In changename method, we're changing the name property, and in originalname method, we're resetting it back to the original name.

We have also added two events on the div, mouseover and mouseout. We will discuss the details of the events in our subsequent tutorials. So for now, mouseover is used to call changename method and mouseout is used to call originalname method.

Output

The output of the above example is shown in the following browser -


As seen in the above browser, it shows the name assigned in the data property, which is the same name. We've assigned as well a mouseover on the div and also a mouseout. Let' see what happens when we mouseover and mouseout.


On mouseover, we see the name of the first component is changed to Bethel. However, the second component stays as it is. This is cause the data component is a function and and it returns an object. Therefore, when it's changed in a place, same is not overwritten in other cases.


Dynamic Components

Dynamic components are created using the keyword <component></component> and it is bound making use of a property as shown in the following example.

Example

Following is a simple example -

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <component v-bind:is = "view"></component>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               view: 'component1'
            },
            components: {
               'component1': {
                  template: '<div><span style = "font-size:25;color:red;">Dynamic Component</span></div>'
               }
            }
         });
      </script>
   </body>
</html>

Output

Following below is the output of the above example -

dynamic_component

Syntax

Dynamic component is created using the following syntax -

<component v-bind:is = "view"></component>

It has v-bind:is = "view", and the value view is assigned to it. View is defined in the Vue instance as follows -

var vm = new Vue({
   el: '#databinding',
   data: {
      view: 'component1'
   },
   components: {
      'component1': {
         template: '<div><span style = "font-size:25;color:red;">Dynamic Component</span></div>'
      }
   }
});

When executed, the Dynamic Component of the template displayed in the browser.


Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial, we will be discussing about Vue.js Computed Properties.

Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.

Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.

Post a Comment

Hello dear readers! Please kindly try your best to make sure your comments comply with our comment policy guidelines. You can visit our comment policy page to view these guidelines which are clearly stated. Thank you.
© 2022 ‧ WebDesignTutorialz. All rights reserved. Developed by Jago Desain