vue.js export declaration syntax-CodePudding

I am looking at this export syntax and don't understand what it means:

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

Is this an object, a list, or what? Why is there an attribute name for name but nothing for the 2nd member? How does this work?

CodePudding user response：

export default is the keyword used to make a default export.
The rest (inside of { }) is the Vue instance object with key/pair values like any regular object.
It will get caught by the compiler and transformed into something reactive thanks to Vue's API.

data() is also equivalent to data: function() but we're using the ES6 shorthand here, because it's just faster and prettier to write it that way (and it does the same thing).

Otherwise, name is the key and 'my-component' is the value in your example.

CodePudding user response：

This an exported object from your component script, it defines the Options API which has many fields, like name that represents the component's name, data defines the reactive data in your component and many other fields like :

computed
watch
life cycle hooks such as created, mounted ....
...

CodePudding user response：

Is this an object, a list, or what?

It's an object that's being exported as the default export of the module. The object has two properties:

name, the string "my-component"
data, a method that (as shown) simply returns an empty object

Why is there an attribute name for name but nothing for the 2nd member?

The name of the second member is data. That's method syntax.