Vue 中使用export 和export default 引出

最新推荐文章于 2025-06-15 09:55:55 发布

原创最新推荐文章于 2025-06-15 09:55:55 发布 · 1.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#export #export default #定义常量使用

Vue 专栏收录该内容

37 篇文章

订阅专栏

本文详细介绍了在JavaScript工程中如何使用export和export default来定义和导出常量及函数，以及如何在其他模块中通过import语句来引用这些资源。文章提供了具体的代码示例，包括常量和函数的定义、按需导入、别名导入和全部导入等常见使用场景。

在工程中，需要定义一些常量，和公用函数供工程使用时，可以创建一个公用的js文件，使用export 导出或者export default 导出。

使用export 导出

1.工程中要定义一些常量

2.定义一些公用的处理函数

//常量定义
const UserName = 'xxxx';//用户名
const PassWord = 'xxxx';//密码

//定义一些函数
//示例 求和
function add(a,b){
return a+b;
}
function reduce(c,d){
return c-d;
}
export {UserName, PassWord, add, reduce}

使用场景

1.引用其中的一个,包括常量或者函数

//引用常量
import {UserName} from '路径';
//引用函数
import {add} from '路径';

//引用时 有冲突 使用别名 as
import {UserName as 别名 } from '路径';

2.全部引用过来

//全部引入 写对应的常量名或者函数名
// UserName  PassWord为变量名， add reduce为函数，
import {UserName,PassWord,add,reduce} from '路径';
// 起一个别名代替  UtilFuc 为别名
import * as UtilFuc 别名 from '路径';

1.如果是直接使用定义的名字，可以直接引用
console.log(UserName);
console.log(add(0,2));//add()函数使用
2.使用使用了别名
console.log(UtilFuc.UserName);
console.log(UtilFuc.add(0,2));//add()函数使用

export default 使用

1.定义

//使用 export default 导出
const ChainKey = '99999';//常量定义

function add(a,b){
    return a+b;
}
function reduce(c,d){
    return c-d;
}

export default {

UserName:'张辉',//
PassWord:'123456',
ChainKey: ChainKey,
add: add,
reduce: reduce
}

2.使用

import 变量名 from '路径';

console.log(BridgeUtil.age);//变量
console.log(BridgeUtil.name);//变量
console.log(BridgeUtil.ChainKey);//变量
console.log(BridgeUtil.userAgent('safari'));//函数

学习博客:

https://www.cnblogs.com/var-chu/p/11121624.html

https://www.cnblogs.com/qixidi/p/10143543.html

https://www.jianshu.com/p/a5f1eee4b63a