Vue export import 导入导出的多种方式与区别介绍

更新时间：2020年02月12日 13:50:40 作者：吕布的僚机

这篇文章主要介绍了Vue export import 导入导出的多种方式与区别介绍，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下

一、部分导出和部分导入

部分导出和部分导入的优势，当资源比较大时建使用部分导出，这样一来使用者可以使用部分导入来减少资源体积，比如element-ui官方的就推荐使用部分导入来减少项目体积，因为element-ui是一个十分庞大的框架，如果我们只用到其中的一部分组件，那么只将用到的组件导入就可以了。

1.1部分导出的写法

export function helloWorld(){
 conselo.log("Hello World");
}
export function test(){
 conselo.log("this's test function");
}

另一种写法，这种方法比较不推荐，因为看起来会比较乱。

var helloWorld=function(){
 conselo.log("Hello World");
}
var test=function(){
 conselo.log("this's test function");
}
export helloWorld
export test

1.2部分导入

只导入需要的资源

import {helloWorld} from "./utils.js" //只导入utils.js中的helloWorld方法
helloWorld(); //执行utils.js中的helloWorld方法

1.3部分导出——全部导入

如果我们需要utils.js中的全部资源则可以全部导入

import * as utils from "./utils.js" //导入全部的资源，utils为别名，在调用时使用
utils.helloWorld(); //执行utils.js中的helloWorld方法
utils.test(); //执行utils.js中的test方法

二、全部导出和全部导入

如果使用全部导出，那么使用者在导入时则必须全部导入，推荐在写方法库时使用部分导出，从而将全部导入或者部分导入的权力留给使用者。

2.1全部导出

需要注意的是:一个js文件中可以有多个export，但只能有一个export default

var helloWorld=function(){
 conselo.log("Hello World");
}
var test=function(){
 conselo.log("this's test function");
}
export default{
 helloWorld,
 test
}

2.2全部导入

import utils from "./utils.js"
utils.helloWorld();
utils.test();

总结

以上所述是小编给大家介绍的Vue export import 导入导出的多种方式与区别介绍，希望对大家有所帮助！

您可能感兴趣的文章:

vant中的toast层级改变操作
这篇文章主要介绍了vant中的toast层级改变操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
vue+iview tabs context-menu 弹出框修改样式的方法
今天遇到一个需求说页面顶部的菜单右键弹出框离得有点远,需要我们做调整,下面小编给大家分享下vue+iview tabs context-menu 弹出框修改样式的方法,感兴趣的朋友跟随小编一起看看吧
2024-06-06
自带气泡提示的vue校验插件（vue-verify-pop）
这篇文章主要为大家详细介绍了自带气泡提示的vue校验插件，vue-verify-pop的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-04-04
VUE元素的隐藏和显示（v-show指令)
本篇文章主要介绍了VUE元素的隐藏和显示（v-show指令)，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-06-06
vue拦截器如何增加token参数
这篇文章主要介绍了vue拦截器如何增加token参数问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-08-08
如何使用el-table+el-tree+el-select动态选择对应值
小编在做需求时,遇到了在el-table表格中加入多条数据,并且每条数据要通过el-select来选取相应的值,做到动态选择,下面这篇文章主要给大家介绍了关于如何使用el-table+el-tree+el-select动态选择对应值的相关资料,需要的朋友可以参考下
2023-01-01
VUE多层路由嵌套实现代码
这篇文章主要为大家详细介绍了VUE多层路由嵌套的实现代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-05-05
vue3中vue.config.js配置及注释详解
在Vue 3.0中,与2.0版本相比有一定的差别,最明显的就是缺少了build、config文件夹,下面这篇文章主要给大家介绍了关于vue3中vue.config.js配置及注释的相关资料,需要的朋友可以参考下
2022-08-08
vuejs中使用mixin局部混入/全局混入的方法详解
混入可以省很多代码(高类聚低耦合),还方便维护,下面这篇文章主要给大家介绍了关于vuejs中使用mixin局部混入/全局混入的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2022-05-05
vue2实现搜索结果中的搜索关键字高亮的代码
这篇文章主要介绍了vue2实现搜索结果中的搜索关键字高亮的代码,需要的朋友可以参考下
2018-08-08