Vue中export和export default的区别

@export和export default的区别

前言

在使用vuejs进行模块化开发的过程中，通常需要模块向外暴露成员以便其他模块导入使用。那么怎么进行暴露和导入使用呢？
这就需要使用到vuejs中的export和export default。

关于模块成员的导入与导出

关于模块成员的导入与导出，必须得提一下，一定要配对使用。使用vue的export或者export default进行导出的，使用import进行导入。而使用nodejs的module.exports或者exports进行导出的，就得使用require(‘模块名称’)来进行导入使用。不得相互混用。

使用和区别(默认webpack配置完成)

1. 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 路径 进行导入使用

2. 在一个模块中，export default只允许向外暴露一次。

3. 在一个模块中，可以同时使用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>

这样不会报错

4. 使用export向外暴露的成员，只能使用{}的形式来进行接收。

export const  HELLO = 'hello'
export const  WORLD = 'world'
export const  HELLOWORLD = 'helloworld'

import {HELLO} from 路径

5. 使用export可以向外暴露多个成员，同时，如果某些成员，我们在import的时候不需要，则可以不在{}中定义,这种形式又叫做按需导入。

import {HELLO,WORLD} from 路径

6. 使用export导出的成员在被接收的时候名称应该一致，但可以使用as进行去别名。
   import {HELLO as H,WORLD as W} from 路径