Vue export(导出)、import（导入）

Posted 2023-03-18

参考技术A

⚠️：1、export default在同一个模块中,不允许同时存在多个
2、某些情况下,一个模块中包含某个的功能,我们并不希望给这个功能命名,而且让导入者可以自己来命名 这个时候就可以使用export default （见下 Vue实例导入/使用js ）

如果我们希望某个模块中所有的信息都导入, -个个导入显然有些麻烦:
通过 可以导入模块中所有的export变量
但是通常情况下我们需要给 起一个别名,方便后续的使用
详见下

[vue]js模块导入导出export default

参考
参考

- export default s1
1.仅能出现1次default
2.导入时候可以随便命名
3,导出时候不必写{}

- 常规的导出导入
1,必须{}格式
2,导入时必须{}匹配
3,a.js 和b.js导入main.js变量名不能重复
    如果重复需 import * as obj1 from "./a.js" 的方式导

-- 栗子:导出2个变量
模块的导入导出:
1,导出 export
2,导入 import

- a.js
export let s1 = "maotai";
export let s2 = "maomao";

- main.js
import {s1, s2} from "./a.js"
console.log(s1, s2);

- index.html
<script src="main.js" type="module"></script>

1,导入导出
2,变量名重复


import * as obj1 from "./a.js"

console.log(obj1.a, obj1.b);


import * as obj2 from "./b.js"

console.log(obj2.b);

- 导出a.js的s1变量, 导入到main.js里面
1.注意导出时候是{}格式
2,导出时export {s1}, 导入时也必须对应 import {s1}
 
- a.js
let s1 = "maotai";
export {s1};

- main.js
import {s1} from "./a.js"
console.log(s1);

- index.html
<script src="main.js" type="module"></script>

1.导出变量时候简写
2.import有变量预解释的效果(定义)

- a.js
export let s1 = "maotai"; //可以用语句来导出

- main.js
import {s1} from "./a.js"
console.log(s1);

- index.html
<script src="main.js" type="module"></script>

- a.js
let s1 = "maotai"; //可以用语句来导出
export default s1;

- main.js(可重复导入)
import any from "./a.js"
console.log(any);

import any2 from "./a.js"
console.log(any2);


- index.html
<script src="main.js" type="module"></script>

- 理解default的规则
- a.js
let s1 = "maotai";
let s2 = "maomao";

//1.只能有1个default
//export default s1;
export default s2;

//2.可以和正常的导出并存
export {s1,s2}


- main.js(可重复导入)
import any from "./a.js"
console.log(any);

import any2 from "./a.js"
console.log(any2);

import {s1, s2} from "./a.js"
console.log(s1, s2);

- index.html
<script src="main.js" type="module"></script>