Difference between "const" and "Vue.component"

Question

I'm really new to the Vue framework and constantly stalling at the basics. Currently I'm stuck with following scenario.

I create/build reusable components this way below:

Vue.component('SomeReusableComponent', {
    props: [ ... ],
    template: `
        <Some HTML>
    `
})

But I also saw other people creating/building components like this:

const SomeReusableComponent = {
    props: [ ... ],
    template:`
        <Some HTML>
    `
}

What is the difference between the two? What is each use case? I mean, I can also attach a Vue.component to a const and it will basically become the same, or not?

Thanks in advance

tony19 · Accepted Answer · 2022-07-15 22:27:59Z

3

A vue component is nothing but a plain javascript object containing the components options like data, template, computed etc as its properties.

What is the difference between the two?

Vue.component(componentName, componentOptions) creates a global component. The component created like this can be used anyehere without registering it.

For example: Vue.component('global-comp', {template: 'This is global component')

The above created component can be used directly as:

//another-component
  <div>
    <global-comp></global-comp>
  </div>

Now the other type of component.

As said above a component is nothing but a plain object

For example:

const MyComponent ={
    template: '<div>My {{text}} component</div>',
    data(){
      return{
        text: 'awesome'
      }
    }
  }

To use the above component in another component you need to register it under components option as below

//another component
  <div>
    <my-component></my-component>
  </div>

  <script>
    //another component
    export default{
      name: 'Another',
      //this is required to register my-component if 
      //it is not global i.e not defined using Vue.component()
      components:{
        'my-component': MyComponent
      }
    }
  </script>

Note:

You do not want to register every component globally as it would pollute the global namespace.
You do not need every component used at multiple places.
In the future when you learn to lazy load your component, you do not want a component which the user might not need in initial bundle and increase its size

Docs- Component Registration

edited Jul 15, 2022 at 22:27

tony19

140k23 gold badges281 silver badges354 bronze badges

answered May 31, 2018 at 11:32

Vamsi Krishna

31.4k8 gold badges73 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Fusseldieb Over a year ago

Thanks for this clarifying answer. May I ask you for what exactly the second example with "export" is useful?

Vamsi Krishna Over a year ago

It just how a component looks if you yuse a bundler like webpack or create a vue project using vue-cli which interna,ly uses webpack

Fusseldieb Over a year ago

Oh, more complex stuff... Hopefully I will get to that soon. Thanks again.

Vamsi Krishna Over a year ago

@Fusseldieb wishing you good luck and hope you get there.. :-)

Max Sinev · Accepted Answer · 2018-05-31 11:32:29Z

2

Vue.component function registers component for global usage. So if you registered Vue.component('my-awesome-component', { /* params */ }) you can use <my-awesome-component> in any another component template.
When you just declare object like your second example with const you will have to register this component some how further with Vue.component function as well or in parent component components section (to use locally in parent component only).
```
//in parent component
import MyAwesomeComponent from "./my-awesome-component";

export default {
...
    components: { MyAwesomeComponent }
...
}
```

answered May 31, 2018 at 11:32

Max Sinev

6,0192 gold badges29 silver badges37 bronze badges

Collectives™ on Stack Overflow

Difference between "const" and "Vue.component"

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related