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


Posted in Javascript onFebruary 12, 2020

在使用vue导出时会有一个default关键字,下面举例说明下在导出时使用export和export default的对应的imort写法的区别

一、部分导出和部分导入

部分导出和部分导入的优势,当资源比较大时建使用部分导出,这样一来使用者可以使用部分导入来减少资源体积,比如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 导入导出的多种方式与区别介绍,希望对大家有所帮助!

Javascript 相关文章推荐
js Array对象的扩展函数代码
Apr 24 Javascript
js+css实现增加表单可用性之提示文字
Jun 03 Javascript
JavaScript的setAttribute兼容性问题解决方法
Nov 11 Javascript
javascript:void(0)是什么意思示例介绍
Nov 17 Javascript
JavaScript按位运算符的应用简析
Feb 04 Javascript
domReady的实现案例
Nov 23 Javascript
js返回顶部实例分享
Dec 21 Javascript
js实现简单的手风琴效果
Feb 27 Javascript
用node和express连接mysql实现登录注册的实现代码
Jul 05 Javascript
JavaScript实现单图片上传并预览功能
Sep 30 Javascript
基于小程序请求接口wx.request封装的类axios请求
Jul 02 Javascript
浅谈Vue使用Cascader级联选择器数据回显中的坑
Oct 31 Javascript
JS FormData对象使用方法实例详解
Feb 12 #Javascript
JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析
Feb 12 #Javascript
微信小程序实现树莓派(raspberry pi)小车控制
Feb 12 #Javascript
JavaScript 替换所有匹配内容及正则替换方法
Feb 12 #Javascript
使用webpack搭建pixi.js开发环境
Feb 12 #Javascript
十分钟教你上手ES2020新特性
Feb 12 #Javascript
node.js基于dgram数据报模块创建UDP服务器和客户端操作示例
Feb 12 #Javascript
You might like
PHP+AJAX实现无刷新注册(带用户名实时检测)
2007/01/02 PHP
PHP和Mysqlweb应用开发核心技术 第1部分 Php基础-3 代码组织和重用2
2011/07/03 PHP
PHP动态创建Web站点的方法
2011/08/14 PHP
背景音乐每次刷新都可以自动更换
2007/02/01 Javascript
Jquery插件写法笔记整理
2012/09/06 Javascript
JS 日期比较大小的简单实例
2014/01/13 Javascript
angularJS中router的使用指南
2015/02/09 Javascript
工厂模式在JS中的实践
2017/01/18 Javascript
Vue.js结合bootstrap实现分页控件
2017/03/10 Javascript
如何使用angularJs
2017/05/08 Javascript
BootStrap模态框不垂直居中的解决方法
2017/10/19 Javascript
vue使用axios实现文件上传进度的实时更新详解
2017/12/20 Javascript
vue.js 获取select中的value实例
2018/03/01 Javascript
vue2.0 资源文件assets和static的区别详解
2018/04/08 Javascript
vue和webpack项目构建过程常用的npm命令详解
2018/06/15 Javascript
dts文件中删除一个node或属性的操作方法
2018/08/05 Javascript
详解bootstrap-fileinput文件上传控件的亲身实践
2019/03/21 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
2019/04/23 Javascript
详细解读Python的web.py框架下的application.py模块
2015/05/02 Python
Django中模型Model添加JSON类型字段的方法
2015/06/17 Python
Python语言实现获取主机名根据端口杀死进程
2016/03/31 Python
Python编写电话薄实现增删改查功能
2016/05/07 Python
python中的lambda表达式用法详解
2016/06/22 Python
python使用多进程的实例详解
2018/09/19 Python
Python简直是万能的,这5大主要用途你一定要知道!(推荐)
2019/04/03 Python
详解Python中的各种转义符\n\r\t
2019/07/10 Python
基于python检查SSL证书到期情况代码实例
2020/04/04 Python
吃透移动端 1px的具体用法
2019/12/16 HTML / CSS
巴基斯坦电子产品购物网站:Home Shopping
2017/09/14 全球购物
美国学校用品、教室和教学商店:Discount School Supply
2018/04/04 全球购物
便利店的创业计划书
2014/01/15 职场文书
关于逃课的检讨书
2014/01/23 职场文书
公司捐款倡议书
2014/05/14 职场文书
2015年民兵整组工作总结
2015/07/24 职场文书
Python编写可视化界面的全过程(Python+PyCharm+PyQt)
2021/05/17 Python
Python初学者必备的文件读写指南
2021/06/23 Python