您的位置:首页 >> Vue >> 《和小米一起学Vue.js》— ES6模块导入导出

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

[ 孤狼 | 2022-07-30 01:28:29 | Vue | 134°C | 0条评论 ]

在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));


转载请注明出处:http://gl.paea.cn/n.php?n=180
 
如您看得高兴,欢迎随意投喂,让我们坚持创作!
赞赏一个鸡腿
还没有人留下遗迹
综合 · 搜索