《和小米一起学Vue.js》— ES6模块导入导出

在vue中，我们经常需要导入各种js来调用一下功能或者实现一些代码的复用。那么想要导入其他的js或导出给其他js使用，那就必须要了解ES6中的模块导入和导出。

引入模块

ES6中引入模块需要在script标签上增加 type="module" 来已入模块化js文件

<script src="./a.js" type="module"></script>
<script src="./index.js" type="module"></script>

导出export

1. 直接使用export标记导出元素（常量，变量，函数，类）

export let name="张三";
export function add(n1,n2){
  return n1+n2;
}

2. 统一使用 export 对象导出元素（常量，变量，函数，类）

let name2="李斯特";
function pj(str){
  return str+',你好';
}
export{
  name2,pj
}

3. 使用默认导出default。导出的元素允许导入时修改名称。（一个模块只能有一个default导出）

export default all='这是默认导出';
export default function(n1,n2){
  return n1/n2;
}
export default class niu{
  niuname='二哈';
  run(){
    console.log('牛儿走了');
  }
  eat(){
    console.log('牛儿吃草');
  }
}

导入import

1. 固定名称导入，使用导出的名字来导入元素

import { name } from "./a.js";
console.log(name);

import { name2,add } from "./a.js";
console.log(add(1,2));

2. 导入默认default导出的元素并命名

import niuniu from "./a.js"
let niu2=new niuniu();
niu2.niuname='牛二';
console.log(niu2.niuname);
niu2.eat();

3. 全部导入，将模块的内容全部导入到一个指定的新对象内使用。

import * as b from "./a.js"
console.log(b.pj(b.name2));