零基础学习Vue: 第40课 js的导入与导出:
零基础学习Vue: 第40课 js的导入与导出:
1.在一个文件夹中创建这3个文件:
index.html //用来在浏览器内运行
a.js //用来导入b.js的数据
b.js //用来导出数据
2.在创建的html文件引入外部a.js文件:
以下是index.html文件内的所有代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>引入js</title>
</head>
<body>
<!--type="module":让a.js这个文件可以使用es6的模块化语法 -->
<script src="./a.js" type="module"></script>
</body>
</html>
3.在b.js文件中声明各种数据并导出:
以下是b.js文件内的所有代码:
//export导出的数据需要用大括号接收
//1. export一个一个导出
export let a1 = '小明';
export let a2 = {age:'18'}
export let a3 = [1,2,3,4,5]
export let a4 = function(){
console.log('男')
}
//2. export{}这个是批量导出
let b1 = '我是b4';
let b2 = {age:'我是b5'};
export {
b1,
b2
};
//export default默认导出 一个js文件内只能使用一次
//接收export default导出的数据时不需要用大括号接收
let c1 = '我是b4';
let c2 = {age:'我是b5'};
export default {c1,c2};
4.在a.js文件中接收b.js导出的数据:
以下是a.js文件内的所有代码:
//1. 接收export导出的数据:
//可以同时接收多个导出数据
import {a1,a2,a3} from './b.js';
//也可以接收一个
import {a4} from './b.js'
console.log(a1,a2,a3);
console.log(a4);
//2. 接收export default导出的数据:
import c from './b.js';
console.log(c);
//3. 接收导出的所有数据 as obj表示把所有数据命名成obj
import * as obj from './b.js';
console.log(obj)