vue.js导出声明语法

4uqofj5v  于 2022-11-17  发布在  Vue.js
关注(0)|答案(3)|浏览(187)

我正在查看此导出语法,但不理解其含义:

export default {
    name: 'my-component',
    data () {
      return {}
    }
}

这是一个对象,一个列表,还是什么?为什么name有一个属性名称,而第二个成员没有?这是如何工作的?

egdjgwm8

egdjgwm81#

export default是用于进行预设汇出的关键字。
其余部分(在{ }内)是Vue示例对象,与任何常规对象一样具有键/对值。
它将被编译器捕获,并由于Vue的API而转换为一些React性的东西。
data()也等价于data: function(),但我们在这里使用ES6的简写,因为这样写更快、更漂亮(而且它做的是同样的事情)。
否则,name是键,'my-component'是示例中的值。

pu3pd22g

pu3pd22g2#

这是从组件脚本中导出的对象,它定义了Options API,其中包含许多字段,如表示组件名称的name、定义组件中的React性数据的data以及许多其他字段,如:

  • 计算的
  • 值班
  • 生命周期挂接,例如createdmounted ....
  • ...
r6vfmomb

r6vfmomb3#

这是一个对象,一个列表,还是什么?
它是一个作为模块默认导出的对象。该对象有两个属性:

  • name,字符串"my-component"
  • data,一个简单返回空对象的方法(如图所示

为什么name有属性name,但第二个成员没有属性name?
第二个成员的名称是data,即method syntax
有关MDN的更多信息:

相关问题