Questions And Answers

More Tutorials

VueJs Components


In Component(s):

props is an array of string literals or object references used to pass data from parent component. It can also be in object form when it is desired to have more fine grained control like specifying default values, type of data accepted, whether it is required or optional

data has to be a function which returns an object instead of a plain object. It is so because we require each instance of the component to have its own data for re-usability purpose.

events is an object containing listeners for events to which the component can respond by behavioral change

methods object containing functions defining the behavior associated with the component

computed properties are just like watchers or observables, whenever any dependency changes the properties are recalculated automatically and changes are reflected in DOM instantly if DOM uses any computed properties

ready is a Vue instance's life-cycle hook


Component scoped (not global)

<script type="x-template" id="form-template">
 <label>{{inputLabel}} :</label>
 <input type="text" v-model="name" />
<div id="app">
 <form-component title="This is a form" v-bind:name="userName"></form-component>

// Describe the form component
// Note: props is an array of attribute your component can take in entry.
// Note: With props you can pass static data('title') or dynamic data('userName').// Note: When modifying 'name' property, you won't modify the parent variable, it is only
// Note: On a component, 'data' has to be a function that returns the data.
var formComponent = {
 template: '#form-template',
 props: ['title', 'name'],
 data: function() {
 return {
 inputLabel: 'Name'
// This vue has a private component, it is only available on its scope.
// Note: It would work the same if the vue was a component.
// Note: You can build a tree of components, but you have to start the root with a 'new
var vue = new Vue({
 el: '#app',
 data: {
 appName: 'Component Demo',
 userName: 'John Doe'
 components: {
 'form-component': formComponent

What are components and how to define components?

Components in Vue are like widgets. They allow us to write reusable custom elements with desired behavior.
They are nothing but objects which can contain any/all of the options that the root or any Vue instance can contain, including an HTML template to render.

Components consist of:

• HTML markup: the component's template
• CSS styles: how the HTML markup will be displayed
• JavaScript code: the data and behavior

These can each be written in a separate file, or as a single file with the .vue extension. Below are examples showing both ways:
.VUE - as a single file for the component
 <div class="hello-world-component">
 <input @keyup.enter="changeName($event)"/>
 export default{
 props:[ /* to pass any data from the parent here... */ ],
 events:{ /* event listeners go here */},
 ready(){ "John";
 return "Hello from " +;
 // this could be easily achieved by using v-model on the <input> field, but just
to show a method doing it this way.
 changeName(e){ =;


In this page (written and validated by ) you learned about VueJs Components . What's Next? If you are interested in completing VueJs tutorial, your next topic will be learning about: VueJs Local Components.

Incorrect info or code snippet? We take very seriously the accuracy of the information provided on our website. We also make sure to test all snippets and examples provided for each section. If you find any incorrect information, please send us an email about the issue:

Share On:

Mockstacks was launched to help beginners learn programming languages; the site is optimized with no Ads as, Ads might slow down the performance. We also don't track any personal information; we also don't collect any kind of data unless the user provided us a corrected information. Almost all examples have been tested. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. By using, you agree to have read and accepted our terms of use, cookies and privacy policy.