Tutorial by Examples

Demo HTML <script type="x-template" id="form-template"> <label>{{inputLabel}} :</label> <input type="text" v-model="name" /> </script> <div id="app"> <h2>{{appName}}</h2> <form-co...

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 marku...

A component can be registered either globally or locally (bind to another specific component). var Child = Vue.extend({ // ... }) var Parent = Vue.extend({ template: '...', components: { 'my-component': Child } }) Thiw new component () will only be available in...

You can extend and register a component in one step: Vue.component('custom-component', { template: '<div>A custom component!</div>' }) Also when the component is registered locally: var Parent = Vue.extend({ components: { 'custom-component': { templa...

Passing an object to the data property when registering a component would cause all instances of the component to point to the same data. To solve this, we need to return data from a function. var CustomComponent = Vue.extend({ data: function () { return { a: 1 } } })

One of the ways components can communicate with its ancestors/descendants is via custom communication events. All Vue instances are also emitters and implement a custom event interface that facilitates communication within a component tree. We can use the following: $on: Listen to events emitted ...