10). VUE.JS Components basic and depth understanding

By -
Component Basic Information



Components makes your code more reusable and your markup more readable.


When registering a component, it will always be given a name.
The template key is where you write your markup for that component. In the same object you’ll later add more functionalities. 

Vue.component('header-component', {
        template: '<div>A custom header component!</div>'
})

new Vue({
     el: '#app'
})

You create an instance of your component through adding <header-component></header-component> in the HTML:

<div id="app">
<my-component></my-component>
</div>

Props

Props will enable you to pass data into a component instance from the outside of that component. or more correctly, pass the data down from a parent.

//My-component is child component
Vue.component('my-component', {
        props: ['message'],
        template: `<div>{{ message }}</div>`,
})

//Main Component is parent component and we pass message from parent to child like below.

<div id="app">
     <my-component v-bind:message="msg"></my-component>
     <my-component v-bind:message="msg1"></my-component>
</div>

var app = new Vue({
       el: '#app',
       data: {
             msg: 'Hello from the Vue instance first called of my-component ',
             msg1: 'Hello from the Vue instance second called of my-component'
       }
})

Now, it will display like below:

'Hello from the Vue instance first called of my-component '
'Hello from the Vue instance second called of my-component '


Component in-depth understanding

There are two way register component 
  1. Global Registration
  2. Local Registration

Global Registration



When we register components using Vue.component. These components are globally registered. That means they can be used in the template of any root Vue instance (new Vue) created after registration. just like below.

Vue.component('my-component-name', {
// ... options ...
})

Local Registration

f you’re using a build system like Webpack, globally registering all components means that even if you stop using a component, it could still be included in your final build. This unnecessarily increases the amount of JavaScript your users have to download.

For define your local components is same as plain JavaScript objects, just look like below:

var ComponentA = { /* ... */ }

Then define the components you’d like to use in a components option:

new Vue({
       el: '#app'
       components: {
               'component-a': ComponentA,
               'component-b': ComponentB
       }
});

locally registered components are not available in sub components.

Comments

Post a Comment

Popular posts from this blog

Angular 4 interview questions and answers for experience

By -
Angular.io is official good resource to lean Angular. And For Angular 2-4 you can used this one of best i have see  here https://www.tutorialspoint.com/angularjs/ is a good platform for learning the basics of AngularJS. You can download the pdf file for every tutorials that are available in it. What is AngularJS 2/4? - Angular is a platform that makes it easy to build applications with the web. Angular combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges. Angular empowers developers to build applications that live on the web, mobile, or the desktop -created by google development team. What is the difference between Angular 1(AngularJS) and Angular 2/4? -Angular 2/4 is complete re-created of Angular 1.In other word,it was completely rewritten from the ground-up. -Angular 1(AngularJS) is controller and $scope based and Angular 2/4 is based on an architecture of component hiera...
Read more

8). Vue.js Methods and Event Handling

By -
We can use the v-on directive to listen to DOM events and run some JavaScript when they’re triggered. Example 1:- JS fiddle <div id="vue-instance">       Enter your name: <input type="text" v-model="name">      <button v-on:click="sayHello">Hey there!</button> </div> var vm = new Vue({        el: '#vue-instance',        data: {             name: ''        },   methods: {            sayHello: function(){             alert('Hey there, ' + this.name);           }        } }); Example 2:-  Sometimes we also need to access the original DOM event in an inline statement handler. You can pass it into a method using the special $event variable: <button v-on:click="warn('Form can...
Read more

12). Vue JS - Slots

By -
<slot> basically use for element to serve as distribution outlets for content. To allow a parent component to pass DOM elements into a child component, provide a <slot></slot> element inside the child component. You can then populate the elements in that slot. Slots basically used for creating Generic components (button, Card, Modal), layout (App, Header, Footer), Recursive component (Tree, Menu).   For Example JS Fiddler Here We have create one component app-child. And we add slot tag and fixed content which always display. But slot content is dynamically what we give it will display. <div id="app">   <h2>We can use slots to populate content</h2>   <app-child>     <h3>This is slot number one</h3>   </app-child>   <app-child>     <h3>This is slot number two</h3>     <small>I can put more info in, too!</small> ...
Read more