In JavaScript ES6, export and export default can be used to export constants, functions, files, modules, etc. We can import constants/function/file name/module name from other files or modules for use. However, in one file or module, Export and import can be multiple, but export default has only one

Using the export

We have configured several values in the config.js file that we want to export to the Vue page, using export

// config.js
var name1 = "Xiao Ming"
var name2 = "Xiao Ming"
export { name1, mame2 }

export const str = "Hello world"
export function fun(n) {
    return n+1
}
export const list = [
    {
        title: 'PCT International Patent Applications'.number: '20209'.unit: '件'}, {title: Number of State-level High-tech Enterprises.number: '20209'.unit: '件',}]Copy the code

The vue page must be imported with curly braces {}, and the variable names in curly braces must be the same as those defined in the config.js file

import { name1, name2 } from 'config'

import { str } from 'config'
import { fun } from 'config'
import { list } from 'config'orimport { str, fun, list } from 'config'
Copy the code

Using the export default

Export default This is equivalent to a system default variable name default. Naturally, default can only have one value, so one file cannot have multiple export defaults. This command is often used to specify the default output of the module, that is, the module can only have one default output. For example, if we use export default in the config.js file, only one value can be exported

// config.js
const list = [
    {
        title: 'PCT International Patent Applications'.number: '20209'.unit: '件'}, {title: Number of State-level High-tech Enterprises.number: '20209'.unit: '件',}]export default list
Copy the code

or

// config.js
export default list = [
    {
        title: 'PCT International Patent Applications'.number: '20209'.unit: '件'}, {title: Number of State-level High-tech Enterprises.number: '20209'.unit: '件',}]Copy the code

The import method corresponding to the Vue page does not contain curly braces, and export default is equivalent to output a variable named default. The system allows us to choose any name for it, so we can choose any name when importing import

import list from 'config'
或
import xxoo from 'config'
Copy the code

Matters needing attention

Do not use export default and ordinary export together