我主要是从vue项目使用常量和方法角度取分析，从具体例子出发
（在js中也可以导入其他js中的数据和方法）
涉及到HelloWord.vue和common.js两个文件
一、使用export导出变量和方法
common.js
//导出变量(方式1) const myName = '小明' const myEge = '18'export { myName as myname, //导入时只能myname，否则报错 myEge } //导出变量(方式2) export const myAdd = 'beijing' //导出方法(方式1) const getMyEge = () =>{ returnmyEge } const getMyAdd = () =>{ returnmyAdd } export { getMyEge, getMyAdd } //导出方法(方式2) export function getMyName () { returnmyName }
HelloWord.vue
<template> <div class="hello"> <div>{{myname}}</div><!--未定义直接使用会报错，"myname" is not defined，必须在data或者computed中定义--> <div>{{myEge}}</div> <div>{{myadd}}</div> </div> </template> <script>import {myname, myEge, myAdd as myadd, getMyName, getMyEge} from '@/utils/common'export default{ name: 'HelloWorld', data () { return{ myEge: myEge } }, computed: { myadd () { returnmyadd } }, mounted () { console.log(myname) console.log(myadd) console.log(getMyName()) console.log(getMyName) //执行方法必须后加括号，否则打印出来是ƒ getMyName() {eturn myName;} console.log(getMyEge()) } } </script>
先就export的使用总结一下下
在common.js中
1.export 导出变量和方法都有两种方式
方式1：先定义再整体导出 export {}
方式2：一段代码直接导出一个，如 export const a=1
2.使用方式1导出时是可以改变方法名或者变量名的,as英文翻译'作为'，那么下面的示例就是，将myName 作为myname导出，后期在导入时就要使用myname，否则就会报错
export {myName as myname}
在HelloWorld中
1.导入变量和方法
import {myname, myEge, myAdd as myadd, getMyName, getMyEge} from '@/utils/common'
此处的myAdd as myadd同样是将myAdd改成了myadd，使用时用myadd，方法名也是可以改的
2.导入的myname不能在{{myname}}使用，会报错"myname" is not defined，需要在data或computed中定义赋值，
在js中可以直接使用console.log(myname)
3.console.log(getMyName) // 执行方法必须后加括号，否则打印出来是ƒ getMyName() {eturn myName;}
二、使用export default导出变量和方法
1.一个js只能使用一个export default
下面代码使用两个，在运行时就会报错
// common.js
const myname = '小红'export defaultmyname const myname2 = '小红'export default myname2
2.export和export default是否可以同时出现
可以，使用不同的导入方式，可以得到export和export default相应的值
可以看以下验证示例
const myname2 = '小红1' const myname = '小红' const myFun = () =>{ returnmyname2 } export { myname2, myname } export default{ myname2, myname, myFun, myFun2: function () { returnmyname } }
<template> <div class="hello"> </div> </template> <script>import myname2, {myname2 as myname1} from '@/utils/common1' export default{ name: 'HelloWorld', data () { return{ } }, computed: { }, mounted () { console.log(myname2)//{myname2: "小红1", myname: "小红"} console.log(myname2.myname2)//小红1 console.log(myname1)//小红1 console.log(myname2.myFun())//小红1 console.log(myname2.myFun2())//小红 } } </script>
三、export 和export default区别
1.export default 在同一个模块中只能出现一次，export可以出现多次（export和export default 可同时使用）
2.导入方式不同，export导入需要加{}
3.export default const str = 'hello world'会报错，export default后不能跟let const 等