ES6 中(Vue)导入和导出

最新推荐文章于 2023-11-03 14:51:45 发布

小农同学。

最新推荐文章于 2023-11-03 14:51:45 发布

阅读量1k

点赞数

分类专栏： ES6 文章标签： es6 vue.js js

原文链接：https://www.bilibili.com/video/BV15741177Eh?from=search&seid=2136406906636329307

版权

ES6 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.先定义后导出:

index.html如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
//type="module" 表示每一个文件以模块化的思想
//并且只有在type="module"时才支持一下例子中的导入导出语法
<script src="aaa.js" type="module"></script>
<script src="bbb.js" type="module"></script>
<script src="mmm.js" type="module"></script>
</body>
</html>

aaa.js如下

var name = '小明'
var age = 18
var flag = true

function sum(num1, num2) {
  return num1 + num2
}

if (flag) {
  console.log(sum(20 , 30))
}
//以对象的方式导出
export {flag,sum}

bbb.js如下

//bbb.js想要用aaa.js中的函数
import {sum} from './aaa.js'

var name = '小红'
var flag = false

console.log(sum(100, 200));

mmm.js如下

//mmm.js想要使用aaa.js定义的变量和函数
import {flag,sum} from './aaa.js'

if (flag) {
  console.log('小明是天才哈哈哈');
  console.log(sum(20,30))
}

2.定义变量同时导出:
aaa.js如下

//var name = '小明'
//var age = 18
//var flag = true

//function sum(num1, num2) {
//  return num1 + num2
//}

//if (flag) {
//  console.log(sum(20 , 30))
//}

//1.导出方式一:
//export {flag,sum}

//2.导出方式二:
//定义变量的同时导出
export var num1 = 1000;
export var height = 1.88;

mmm.js如下

//import {flag,sum} from './aaa.js'
import {num1,height} from "./aaa.js";

//if (flag) {
//  console.log('小明是天才哈哈哈');
//  console.log(sum(20,30))
//}

console.log(num1)
console.log(height);

3.定义函数\类同时导出:
aaa.js如下

//var name = '小明'
//var age = 18
//var flag = true

//function sum(num1, num2) {
//  return num1 + num2
//}

//if (flag) {
//  console.log(sum(20 , 30))
//}

//1.导出方式一:
//export {flag,sum}

//2.导出方式二:
//定义变量的同时导出
//export var num1 = 1000;
//export var height = 1.88;

//3.导出函数/类
export function mul(num1, num2) {
  return num1 * num2
}

//es5 定义类的方式
export function Teacher(name, age) {
  this.name = name
  this.age = age
  this.sayHi = function () {
    console.log('大家好,我叫'+this.name+',今年'+this.age)
  }
}

//es6 定义类的方式
export class Persion {
  //构造方法
  constructor(name, age) {
    this.name = name
    this.age = age
  }
  //普通方法
  run() {
    console.log(this.name+'在奔跑'+this.age)
  }
}

mmm.js如下

//import {flag,sum} from './aaa.js'
//import {num1,height} from "./aaa.js";
import {mul,Teacher,Persion} from "./aaa.js";

//if (flag) {
//  console.log('小明是天才哈哈哈');
//  console.log(sum(20,30))
//}

//console.log(num1)
//console.log(height);

console.log(mul(30,50))
const t = new Teacher('小农老师', 20)
t.sayHi()
const p = new Persion('小农同学', 20);
p.run()

4.export default默认导出/默认导入:
export default在同一个模块中,不允许同时存在多个!!
aaa.js如下

//var name = '小明'
//var age = 18
//var flag = true

//function sum(num1, num2) {
//  return num1 + num2
//}

//if (flag) {
//  console.log(sum(20 , 30))
//}

//1.导出方式一:
//export {flag,sum}

//2.导出方式二:
//定义变量的同时导出
//export var num1 = 1000;
//export var height = 1.88;

//3.导出函数/类
//export function mul(num1, num2) {
//  return num1 * num2
//}

//es5 定义类的方式
//export function Teacher(name, age) {
//  this.name = name
//  this.age = age
//  this.sayHi = function () {
//    console.log('大家好,我叫'+this.name+',今年'+this.age)
//  }
//}

//es6 定义类的方式
//export class Persion {
  //构造方法
//  constructor(name, age) {
//    this.name = name
//    this.age = age
//  }
  //普通方法
//  run() {
//    console.log(this.name+'在奔跑'+this.age)
//  }

//4.export default 表示导出时不命名 引入方自己决定叫啥。
const address = '北京市'
export default address

}

mmm.js如下

//import {flag,sum} from './aaa.js'
//import {num1,height} from "./aaa.js";
//import {mul,Persion} from "./aaa.js";

//不再需要{}了, 默认导入aaa.js中 export default默认导出的
//也就是说aaa.js只能有一个 export default默认导出
//不然在mmm.js默认导入时就分不清楚到底要导入哪一个
import addr from './aaa.js'

//if (flag) {
//  console.log('小明是天才哈哈哈');
//  console.log(sum(20,30))
//}

//console.log(num1)
//console.log(height);

//console.log(mul(30,50))
//const t = new Teacher('小农老师', 20)
//t.sayHi()
//const p = new Persion('小农同学', 20);
//p.run()

console.log(addr)

4.export default默认导出函数:
aaa.js如下

export default function (a) {
  console.log(a)
}

mmm.js如下

import addr from './aaa.js'
addr('你好啊')

一次性导入aaa.js
mmm.js如下 aaa.js不要做任何改变

//统一全部导入
import * as qb from './aaa.js'
console.log(qb)

游览器打印如下
在这里插入图片描述
调用如下

qb.default('哈哈哈')
console.log(qb.height);

小农同学。

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
5
评论
ES6 中(Vue)导入和导出

1.先定义后导出:index.html如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body>//type="module" 表示每一个文件以模块化的思想//并且只有在type="module"时才支持一下例子中的导入导出语法<script src
复制链接

扫一扫