零基础学习Vue: 第40课 js的导入与导出：

最新推荐文章于 2023-10-16 10:42:25 发布

舜岳

最新推荐文章于 2023-10-16 10:42:25 发布

阅读量308

点赞数 1

分类专栏： vue 文章标签： js vue

本文链接：https://blog.csdn.net/qq_41614928/article/details/89743101

版权

vue 专栏收录该内容

80 篇文章 8 订阅

订阅专栏

零基础学习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)

运行结果如下：

在这里插入图片描述

舜岳

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
零基础学习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"><he...
复制链接

扫一扫