@export和export default的区别
前言
在使用vuejs进行模块化开发的过程中,通常需要模块向外暴露成员以便其他模块导入使用。那么怎么进行暴露和导入使用呢?
这就需要使用到vuejs中的export和export default。
关于模块成员的导入与导出
关于模块成员的导入与导出,必须得提一下,一定要配对使用。使用vue的export或者export default进行导出的,使用import进行导入。而使用nodejs的module.exports或者exports进行导出的,就得使用require(‘模块名称’)来进行导入使用。不得相互混用。
使用和区别(默认webpack配置完成)
- export default向外暴露的成员,可以使用任意的变量来接收。
<template>
<div>
<h1>我是hello组件</h1>
</div>
</template>
<script>
export default {
data(){
return{
msg:'我是hello组件的数据msg'
}
},
methods:{
},
}
</script>
<style lang="stylus" scoped>
</style>
其他模块可直接使用 import 自定义名字 from 路径 进行导入使用
-
在一个模块中,export default只允许向外暴露一次。
-
在一个模块中,可以同时使用export defau和export向外暴露成员。
<template>
<div>
<h1>我是hello组件</h1>
</div>
</template>
<script>
export default {
data(){
return{
msg:'我是hello组件的数据msg'
}
},
methods:{
},
}
export {
}
</script>
<style lang="stylus" scoped>
</style>
这样不会报错
- 使用export向外暴露的成员,只能使用{}的形式来进行接收。
export const HELLO = 'hello'
export const WORLD = 'world'
export const HELLOWORLD = 'helloworld'
import {HELLO} from 路径
- 使用export可以向外暴露多个成员,同时,如果某些成员,我们在import的时候不需要,则可以不在{}中定义,这种形式又叫做按需导入。
import {HELLO,WORLD} from 路径
- 使用export导出的成员在被接收的时候名称应该一致,但可以使用as进行去别名。
import {HELLO as H,WORLD as W} from 路径