变量导入导出
// 导出
// export const a = 1
// export let b = 2
// export var list = ['list']
const a = 1
let b = 2
var list = ['list']
export {
a,
b,
list
}
// 导入
import {a,b,list} from '../src/vueplug/index'
console.log(a,b,list);
默认导出 export default 和导入,及别名的情况
const a = 1
let b = 2
var list = ['list']
export {
a,
b,
}
// 只能默认导出一个
export default list
// 导入,注意默认导出的那个值 我们就不用{}来导出
import list, {a,b} from '../src/vueplug/index'
console.log(a,b,list);
// 别名讲list 改为list1
import list1, {a,b} from '../src/vueplug/index'
console.log(a,b,list1);
export default 导出多个变量 不用每次定义变量的方式
export default {
a:1,
b:2
}
// 导入,注意默认导出的那个值 我们就不用{}来导出
import list from '../src/vueplug/index'
console.log(list.a);
export default 没使用{} 和 export default 使用{} 的区别
// 导出
let num = 999
export default num
// 导入,注意默认导出的那个值 我们就不用{}来导出
import num from '../src/vueplug/index'
console.log(num) // 999
// 导出
let num = 999
export default { num }
// 导入,注意默认导出的那个值 我们就不用{}来导出
import num from '../src/vueplug/index'
console.log(num) // { 999 }
函数导出和导入的形式
// 导出
const test = () =>{
console.log('test');
}
export {
test
}
export function say(content) {
console.log(content);
}
export default function run() {
console.log('run');
}
// 导入
import run, {test,say} from '../src/vueplug/index'
run()
say('hello')
test()
对象的导入和导出的形式
// 导出
const data = {
name: 'liu man'
}
const des = {
adr : 'beijin'
}
export {
data,
}
// 不能以这样的形式导出对象 , 会引起语义的冲突
// export {
// code: 0,
// age: 20
// }
export default {
age: 20,
des
}
// 导入
// 不能以这样的形式导出,会引起语义的冲突
// import {age, des} from '../src/vueplug/index'
import obj, {data} from '../src/vueplug/index'
let {age,des} = obj
console.log(data);
console.log(age);
console.log(des.adr);
类的导入和导出的形式
// 导出
class Test {
constructor(id) {
this.id = 1
}
}
class Test2 {
constructor() {
this.id = 2
}
}
// export {
// Test
// }
// export default Test2
// export default class Test3 {
// constructor() {
// this.id = 3
// }
// }
// export default class {
// constructor() {
// this.id = 4
// }
// }
export class Test5{
constructor() {
this.id = 5
}
}
// 类不能以这样的形式导出, 语义上的冲突
// export default {
// Test2
// }
// export class {
// constructor() {
// this.id = 4
// }
// }
// 导入
// import Test2 , {Test} from '../src/vueplug/index'
// import Test3 from '../src/vueplug/index'
// import Test4 from '../src/vueplug/index'
import {Test5} from '../src/vueplug/index'
// let test = new Test()
// console.log(test.id);
// let test2 = new Test2()
// console.log(test2.id);
// let test3 = new Test3()
// console.log(test3.id);
// let test4 = new Test4()
// console.log(test4.id);
let test5 = new Test5()
console.log(test5.id);
多个模块导出和导入的形式
// 导出
class Test {
constructor(id) {
this.id = 1
}
}
class Test2 {
constructor() {
this.id = 2
}
}
export {
Test,
Test2
}
export default class Test3 {
constructor() {
this.id = 3
}
}
// 导入
// import {Test,Test2} from '../src/vueplug/index'
// 这样的好处是不用引入多个
import * as Mold from '../src/vueplug/index'
// let test = new Test()
// console.log(test.id);
// let test2 = new Test2()
// console.log(test2.id);
let test = new Mold.Test()
console.log(test.id);
let test2 = new Mold.Test2()
console.log(test2.id);
// 注意* 这样的形式导出时 ,是不包含export default的模块,需要与Mold.default方式获取
let test3 = new Mold.default()
console.log(test3.id);
关乎导出的模块是否能相互引用
// 导出
const test= () =>{
console.log('test');
}
const run = () => {
test()
}
export {
run
}
export function say() {
console.log('say');
}
export function eat() {
say()
}
// 导入
import {run,eat} from '../src/vueplug/index'
run()
eat()