javascript - 为什么 Vue 组件对象不需要值？

Question

我复制了文档和示例来让我的 Vue 组件正常工作。这是对我有用的简化版本:

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

在纯 JavaScript 中，components 对象的格式会抛出一个错误，指出 Unexpected ','，因为没有与 关联的值MyComponent 键。

Vue 对象有什么不同之处可以让它摆脱这个问题？我能找到的最接近的东西是 ES6 中的对象解构，但这似乎也不太适用于本例，因为格式似乎与所需的有效结构不匹配。

Answer 1

这是由于 ECMAScript 2015 中的“对象文字属性值简写”功能所致。

基本上你可以替换这段代码:

{
    MyComponent: MyComponent,
    SecondComponent: SecondComponent
}

与

{
    MyComponent, 
    SecondComponent
}

只要属性名称和变量名称完全匹配即可。

此处进一步描述:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer(ECMAScript 2015 中的新符号)