export与export default详解

export和export default 的作用

•  用来导出常量、函数、文件、模块的
• 是ES6语言

export 具体使用 

• 设置变量，然后使用export导出

  //--------------导出与定义变量直接一起写------------------------------
  export const A = 1; 
  //----------------第一种方式：定义变量与导出分开------------------------------
  var B = { name: 'C', value: 3}
  //导出和变量分开，导出时变量名加 {}
  export {B}
  var  C = "直接导出C"
  var D = [{ id: 1, name: '张三' }, { id: 2, name: '李四'} ]
  export { C, D }

• 使用 import 引入

  //导入的变量名称 必须和导出名称相同
  //导入的时候变量名必须加{}
  import { A, B, C, D } from '@/pages/export_page/test.js'
  
  console.log("A=", A);
  console.log("B=", B);
  console.log("C=", C);
  console.log("D=", D);

• 打印的结果为：
  
• export 特点
  1、导出时需要和导入的变量名称相同
  2、如果导出和定义变量分开，导出时变量名加  { }
  3、导入的时候变量名必须加  { }
  4、可以有多个export语句

export default 具体使用

• export default 导出

  const A = 1;  
  var B = { name: 'C', value: 3}
  var C = "直接导出C"
  var D = [{ id: 1, name: '张三' }, { id: 2, name: '李四'} ]
  //把所有{}中所有的内容都赋值给default 并可以另命名
  export default { a:A,B,C, list:D }

• 使用 import 引入

  // 引入时，可以重命名
  //引入时，去掉 {}
  import _test from '@/pages/export_page/test_default.js'
  
  //打印
  console.log("t_default=", _test);

• 打印的结果为：
  
• export default特点
  1、一个文件只能有一个export default语句
  2、引入时，可以变成不同的名称
  3、直接把所有内容都导出
  4、引入时，设置的变量名不用加 { }