vue中的export default和export

共同作用：

• export default和export都能导出一个模块(文件)里面的常量、函数、文件和模块等。
• import是用来向文件中导入常量、函数、文件和模块的

区别：

1、一个文件或模块中，可以有多个export和import，但是只能有一个export default
2、通过export导出，在导入的时候需要加{}，而用export default导出，则不需要加{}

示例1：

同一文件中引用：文本插值

<template>
  <p>{{name}}</p>
  <p>{{age}}</p>
</template>
<script>
export default {
  data() {
    return {
      name: '张三',
      age: '19'
    };
  }
};
</script>

示例2：

不同文件之间：default
导出：

// test.js
var info = {
    name: '张三',
    age: 18
}
export default info

引用：

import {data}  from './test.js'
console.log(data)

注意：data可以随意命名

示例3

不同文件之间：export default

// test.js
var info = {
    name: '李四',
    age: 18
}
export info

引用：

import data,  from './test.js'
console.log(data)

注意

1、export default向外暴漏的成员，可以使用任意变量来接收。如示例2
2、在一个模板(文件)中，export default只允许向外暴漏一次
3、在一个模板(文件)中，export default和default可以同时存在
4、使用export向外导出的成员，只能使用{}的形式来接收，这种形式叫按需导出
5、export可以向外暴露多个成员，同时，如果某些成员，在import导入时不需要，可以不在{ }中定义
6、使用export导出的成员，必须严格按照导出时候的名称，来使用{ }按需接收
7、使用export导出的成员，如果想换个变量名称接收，可以使用as来起别名

示例3

不同文件之间：export default和default同时存在、起别名

// demo.js
var data= {
    name: '张飞',
    age: 35
}
export default info 
export var a1 = '上海'
export var b1= '北京'

接收：

import zf, {a1, b1 as bj} from './test.js'
console.log(zf);
console.log(a1);
console.log(bj);