VUE中的export default和export使用方法解析

 更新时间:2022年12月14日 15:41:16   投稿:yin  
export default和export都能导出一个模块里面的常量,函数,文件,模块等,在其它文件或模块中通过import来导入常量,函数,文件或模块。但是,在一个文件或模块中export,import可以有多个,export default却只能有一个。

export default和export的区别

export主要用于对外输出本模块变量的接口,一个文件就可以被理解为一个模块。export就是导出。

import就是在一个模块中加载另一个含有export接口的模块, import就是导入。

export default和export都能导出一个模块里面的常量,函数,文件,模块等,在其它文件或模块中通过import来导入常量,函数,文件或模块。这样就可以使用它们了。但是,在一个文件或模块中,export,import可以有多个,export default却只能有一个。

通过export方式导出,在导入的时候需要加{}大括号,export default 就不需要{}。

export default简单示例

导出:

// test.js
var info = {
    name: 'zs',
    age: 20
}
export default info

接收:
代码中的test.js为上面的代码文件;aaa可以任意命名,可以在控制台输出info对象

import aaa,  from './test.js'
console.log(aaa)

注意:

1、export default 向外暴露的成员,可以使用任意变量来接收

2、在一个模块中,export default 只允许向外暴露一次

3、在一个模块中,可以同时使用export default 和export 向外暴露成员

4、使用export向外暴露的成员,只能使用{ }的形式来接收,这种形式,叫做【按需导出】

5、export可以向外暴露多个成员,同时,如果某些成员,在import导入时,不需要,可以不在{ }中定义

6、使用export导出的成员,必须严格按照导出时候的名称,来使用{ }按需接收

7、使用export导出的成员,如果想换个变量名称接收,可以使用as来起别名

代码示例

// test.js
var info = {
    name: 'zs',
    age: 20
}
export default info
 
export var title = '小星星'
 
export var content = '哈哈哈'

在下面代码中接收,test.js使用export default 和 export 向外暴露的成员

import person, {title, content as content1} from './test.js'
console.log(person);
console.log(title + '=======' + content1);

到此这篇关于VUE中的export default和export使用方法解析的文章就介绍到这了,更多相关VUE中的export default内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue项目实现搜索内容变红色显示

    vue项目实现搜索内容变红色显示

    这篇文章主要为大家介绍了vue项目实现搜索内容变红色显示,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • vue2.0结合Element-ui实战案例

    vue2.0结合Element-ui实战案例

    这篇文章主要介绍了vue2.0结合Element-ui实战案例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • Vue 动画效果、过渡效果的示例代码

    Vue 动画效果、过渡效果的示例代码

    这篇文章主要介绍了Vue 动画效果、过渡效果,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-04-04
  • vue定义在computed的变量无法更新问题及解决

    vue定义在computed的变量无法更新问题及解决

    这篇文章主要介绍了vue定义在computed的变量无法更新问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • vue-cli3设置代理无效的解决

    vue-cli3设置代理无效的解决

    这篇文章主要介绍了vue-cli3设置代理无效的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • Vue全局变量的定义及使用方法

    Vue全局变量的定义及使用方法

    这篇文章主要给大家介绍了关于Vue全局变量的定义及使用的相关资料,定义完全局变量后,我们可以在程序中的任何地方使用它们,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-09-09
  • vue的列表交错过渡实现代码示例

    vue的列表交错过渡实现代码示例

    这篇文章主要介绍了vue的列表交错过渡实现代码示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • vue实现全选组件封装实例详解

    vue实现全选组件封装实例详解

    这篇文章主要介绍了vue 全选组件封装,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-02-02
  • elementui实现表格自定义排序的示例代码

    elementui实现表格自定义排序的示例代码

    本文主要介绍了elementui实现表格自定义排序的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • 一文带你吃透Vue3编译原理

    一文带你吃透Vue3编译原理

    一直对编译原理的东西都有一种恐惧感,感觉太难了,看不懂,打开vue3源码看到编译相关的代码,直接吓退。不要担心,小编今天带你一文吃透Vue3编译原理
    2023-02-02

最新评论