Vue.js Components

Vue.js Component is an important feature of this framework. It is used to builds the custom elements. It can be reusable in the HTML file of the new Vue instance. We can also use the component to build custom elements within the root instance of Vue.

Since the Vue components are reused to the Vue instances, they accept the same options as the new Vue instances as data, computed, watch, methods, and life-cycle hooks. Only a few root-specific options, including el, are exceptions. If you want to create a component, use the following syntax:

Syntax:

Vue.component(‘name of the component’,{{// options }};

Example: This example explains how we can use the Vue components in the Vue.js application.

Index.html

<!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <title>Vue.js Component</title>
     <script src="https://unpkg.com/vue/dist/vue.js"></script> 
   </head>
   <body>
     <div id="app"> 
      <app-component></app-component>
     </div>
     <div id="app_1">
       <app-component></app-component>
     </div> 
   </body>
 </html>

Main.js

import Vue from 'vue'
 import App from './App'
 import router from './router'
 Vue.config.productionTip = false
 Vue.component('app-component',{
   template : '<div><h1>This is an example of Vue.js Component</h1></div>' 
 });
 var vm = new Vue({
   el: '#app'
 });
 var vm1 = new Vue({ 
   el: '#app_1'
 });

Output: After the execution of this code, we will get the output, as shown below:

In the above example, we have seen the basic components with the basic options in the Vue.js application. But now, we are going to use the other options like data and methods with the Vue component. Although we have the data as a component function, we can use its properties in the same way as you do with the direct Vue instance. Also, we are going to add two methods, i.e., changename and the originalname. In changename, we change the name property, and in the originalname, we reset it back to the original name.

Here, we have also added the two events on the div tag, mouseover, and mouseout. The mouseover event calls the changename method, whereas the mouseout event calls the originalname method.

Now, we use the above example to understand this, and we will only do given changes in the .js file.

Example:

Main.js

import Vue from 'vue'
 import App from './App'
 import router from './router'
 Vue.config.productionTip = false
 Vue.component('app-component',{
   template : '<div v-on:mouseover = "changename()" v-on:mouseout = "originalname();"><h1>Hi! My name is <span id = "name">{{name}}</span></h1></div>', 
   data: function() {
      return {
         name : "John"
      }
   }, 
  methods:{-
     changename : function() {
        this.name = "John";
     },
     originalname: function() {
        this.name = "James";
     }
  }
});
var vm = new Vue({
  el: '#app'
});
var vm1 = new Vue({
  el: '#app_1'
});

Output: After executing this code, we will get the output, as shown below:

On the mouseover and mouseout event, the name of the first component is changed to James, and the second component remains the same. It is because the data function is a component, and it returns an object. Thus, when it is changed in one position, the same thing is not overwritten in other situations.

Dynamic Component

Dynamic components are build using the <component></component> element. Dynamic components can be bounded using a v-bind property. We can use the following syntax for the dynamic component.

Syntax:

<component v-bind:is = “show”></component>

Example: This example explains how we can use the dynamic component in the Vue.js component.

Index.html

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Vue.js Component</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <body>
    <div id="app" style = "text-align:center">
      <component v-bind:is = "show"></component>
    </div>
  </body>
</html>

Main.js

import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
var vm =  new Vue({
   el: '#app',
   data: {
      show: 'component'
   },
   components: {
      'component': {
         template: '<div><span style = "font-size:30;color:blue;">This is a Dynamic Component Example</span></div>'
      }
   }
})

Output: After executing this code, we will get output, as shown below;

← Prev Next →