VueJS - Components


Components in VueJS creates custom elements, which can be reused in HTML and loads independently.
At a high level, Components are custom elements that Vue.js’ compiler would attach specified behavior to. In some cases, they may also appear as a native HTML element extended with the special is attribute.

Component Names :
The component’s name is the first argument of Vue.component
Component naming conventions are kebab-case and PascalCase

kebab-case




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

PascalCase





   Vue.component('ComponentName', { 
       /* ... */ 
   })

Creating a component:

To create a component in Vue, first we need to register a component, component registration can be done locally or globally.



Global Registration:

Here the components will be a part of entire application.



   Vue.component('my-component-name', {
      // ... logic ...
   })
Try this on Scrimba

Local Registration:

Here the components will be a part of only the vue instance created.


  new Vue({
  el: '#app',
  components: {
    'component-a': Component1
   }
  })


Try this on Scrimba