Use component in Vue JS with example.

4 years ago
Zarabia Riaz
3,607 Views
2

In this session, we will learn about how to use components in Vue JS with example and code.

Vue Components

The most important feature of Vue JS that creates custom elements, which can be reused in HTML is called Components.

Let’s create a component and work with an example that will help us to give a better understanding of how components work with Vue JS

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'
});

The following syntax will help us to create a component.

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

After the component is create, the name of the component is custom element. It can be use in the Vue instance element creating.

For example: In the .js file, we have used a test component as the name of the component, and the same name is used as the custom element inside the divs.

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

In the .js file, the component created, to which we have assigned an HTML code we have to add a template. For example, as shown in the following script, this is a way of registering a global component, which can be made a part of any vue instance.

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

However, when we inspect the same in the browser. We will not notice the custom tag in plain HTML present in the template as shown in the following screenshot.

Dynamic Components

Using the keyword <component></component> dynamic components are created and it is bound using a property as shown in the following example mention below.

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

Using the following syntax dynamic component is created.

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

View is defined in the Vue instance as follows mention below.

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 template Dynamic Component is displayed in the browser.