VUE中的export default和export使用方法解析
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框架，感兴趣的朋友可以了解下2020-12-12
在vue单页中，我们可以通过监控route对象，从中匹配信息去决定是否验证token，然后定义后续行为。下面通过实例代码给大家分享vue登录注册及token验证功能，需要的朋友参考下吧2017-12-12
这篇文章主要给大家介绍了关于离线搭建vue环境运行项目的相关资料,文中通过实例代码以及图文介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下2023-06-06
文章介绍了一个父组件和子组件的交互过程,父组件通过点击“关联公司”输入框弹出子组件dialog,子组件中使用SelectCompany.vue实现默认选中功能,作者分享了个人经验,希望能对大家有所帮助2025-01-01
这篇文章主要介绍了vue中使用echarts的方法,结合实例形式详细分析了vue中使用echarts的包安装、引入、生命周期函数元素挂载等相关操作技巧与使用注意事项,需要的朋友可以参考下2023-05-05
这篇文章主要介绍了vue中keep-alive的用法及问题描述,本文给大家介绍的非常详细，具有一定的参考解决价值，需要的朋友可以参考下2018-05-05
这篇文章主要介绍了Nuxt.js实现一个SSR的前端博客的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
本篇文章主要介绍了vue组件Prop传递数据的实现示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
今天小编就为大家分享一篇解决Vue 项目打包后favicon无法正常显示的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
本文主要介绍了element el-tree折叠收缩的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
最新评论