export，export default，import的使用

export 和 export default 用于对外输出本模块（一个文件可以理解为一个模块）变量的接口

import用于在一个模块中加载另一个含有export接口的模块。

export的用法

const name = '小明'
const sing = function songs() {
  console.log('singSong');
}
function play(a,b) {
  return a+b
}
export const love = '小美'
export {
  name,
  sing,
  play
}

export导出的特点

1 .  一次可以导出多个数据

2.  导出的数据可以是变量,方法,可以传递数据等

3.  一个文件可以使用多个export导出

4.  有两种导出方式 一个先定义最后集体导出, 一个是每个都单独使用export导出

export对应的import的用法

import { name, sing, play, love } from "../untils/index";   //文件路径根据实际情况来
  created() {
    console.log(name);    //结果为 小明
    sing();   //结果为 singSong
    console.log(play(1, 2));   //结果为 3
    console.log(love);  //结果为  小美
  }, 

export对应的import的特点

1. 导入名称为导出对应的名称,可以根据需要导入导出,不必全部导出

2. 导入的属性方法等需要用大括号包裹

3. 使用时就当导入的代码在自己当前的页面,正常使用即可

export default的用法

function num1(val) {
  return val+'a'
}
function num2(val) {
  return val+'b'
}
export default {
num1,
num2
}

// 或者：

const name = '张'
export default {
  name
}
export const age = 18
}

export default的特点

1. 一个文件里只能写一个export default

2. 可以同时加多个export

export default对应的import的用法

import name from "../untils/index";
import {age} from "../untils/index";
 created() {
    console.log(name);  
    //结果为导出文件的两个函数
    console.log(age);  //结果为18
  },

export default对应的import的特点

1. export default对应的导入名称不需要加大括

2. 如果同时存在export导出的方式需要分别导入

3. 最后特别注意: export导出的值是可以直接用的,而且导入的名称必须和导出的一致但是export default导出的是整个表达, 例如上面例子,直接导入导出的名称得到的是导出时的整个代码所以需要再继续使用name.num1 和 name.num2 才能真正取到里面的值 也因此export default对应的导入名称可以是任意的