Search code examples
vue.jsvuejs2vuejs3components

difference between vuejs local registration syntax

I found out there is two ways to make local registration in vuejs:

1) assigning components to a variable:

const components = { 'test-selector': TestSelector, };

2) declaring it as an object

components:{ 'test-selector': TestSelector, };

what is the difference between these 2 syntax ?

find illustrative example:

var vm = new Vue({
el: my-app,
data: function(){
return {
count:0
}
},
components:{
'test-selector': TestSelector
}

})

const components = {
'test-selector': TestSelector
};

for (const key in components) {
  Vue.component(key, components[key]);
}
Solution

  • The first snippet uses locally registered components, i.e. the ones that are used in my-app DOM template. This doesn't affect nested test-selector components, in case there are any.

    The second snippet uses globally registered components and affects all test-selector components used in Vue instance.