CODEWITHSUNDEEP
javascriptvuejs2vue-component
bdx
bdx

Reputation: 3516

Why does the Vue components object not require values?

I copied documentation and examples to get my Vue components working. Here's a simplified version of what is functional for me:

import MyComponent from '../components/my_component.vue'
import SecondComponent from '../components/second_component.vue'
var app = new Vue({
  components: {MyComponent, SecondComponent}
})

In plain javascript, the format of the components object would throw an error stating Unexpected ',', because there isn't a value associated with the MyComponent key.

What is different about the Vue object that allows it to get away with this? The closest thing I can find is object destructuring in ES6 but that also doesn't seem to quite apply in this instance as the format doesn't seem to match the valid structure that requires either.

Upvotes: 0

Views: 58

Answers (1)

Bragolgirith
Bragolgirith

Reputation: 2238

These is due to the 'object literal property value shorthand' feature in ECMAScript 2015.

Basically you can replace this code:

{
    MyComponent: MyComponent,
    SecondComponent: SecondComponent
}

with 

{
    MyComponent, 
    SecondComponent
}

as long as the property name and the variable name match exactly.

This is further described here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer (New notations in ECMAScript 2015)

Upvotes: 4

Related Questions