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 相关文章推荐
快速保存网页中所有图片的方法
Jun 23 Javascript
让网页根据不同IE版本显示不同的内容
Feb 08 Javascript
设置iframe的document.designMode后仅Firefox中其body.innerHTML为br
Feb 27 Javascript
分享10个优化代码的CSS和JavaScript工具
May 11 Javascript
jQuery实现的无缝广告图片左右滚动功能详解
Dec 24 Javascript
js Canvas实现的日历时钟案例分享
Dec 25 Javascript
JavaScript制作简易计算器(不用eval)
Feb 05 Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
Jun 17 Javascript
详解webpack中的hash、chunkhash、contenthash区别
Jan 05 Javascript
详解使用 Node.js 开发简单的脚手架工具
Jun 08 Javascript
新手快速入门微信小程序组件库 iView Weapp
Jun 24 Javascript
Webpack设置环境变量的一些误区详解
Dec 19 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 download.php实现代码 跳转到下载文件(response.redirect)
2009/08/26 PHP
php生成excel列名超过26列大于Z时的解决方法
2014/12/29 PHP
在php中设置session用memcache来存储的方法总结
2016/01/14 PHP
PHP设计模式之装饰器模式定义与用法详解
2018/04/02 PHP
JavaScript 给汉字排序实例代码
2008/06/28 Javascript
精心挑选的15个jQuery下拉菜单制作教程
2012/06/15 Javascript
JS 使用for循环遍历子节点查找元素
2014/09/06 Javascript
利用a标签自动解析URL分析网址实例
2014/10/20 Javascript
DOM 事件流详解
2015/01/20 Javascript
浅析javascript函数表达式
2016/02/10 Javascript
JavaScript面试题大全(推荐)
2016/09/22 Javascript
详解js运算符单竖杠“|”与“||”的用法和作用介绍
2016/11/04 Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
2017/05/17 Javascript
微信小程序实现轮播图效果
2017/09/07 Javascript
Vue.js2.0中的变化小结
2017/10/24 Javascript
JavaScript之解构赋值的理解
2019/01/30 Javascript
JS字符串补全方法padStart()和padEnd()
2020/05/27 Javascript
Vue 监听元素前后变化值实例
2020/07/29 Javascript
[01:49]一目了然!DOTA2DotA快捷操作对比第二弹
2014/05/16 DOTA
Python实现抓取网页并且解析的实例
2014/09/20 Python
Python基础语法(Python基础知识点)
2016/02/28 Python
Python实现购物系统(示例讲解)
2017/09/13 Python
python微信公众号开发简单流程
2018/03/23 Python
Python实现查看系统启动项功能示例
2018/05/10 Python
wxPython实现列表增删改查功能
2019/11/19 Python
python2和python3哪个使用率高
2020/06/23 Python
Python venv虚拟环境配置过程解析
2020/07/08 Python
Ref与out有什么不同
2012/11/24 面试题
单位门卫岗位职责
2013/12/20 职场文书
应聘英语教师求职信
2014/04/24 职场文书
三好生演讲稿
2014/09/12 职场文书
学校禁毒宣传活动总结
2015/05/08 职场文书
具结保证书范本
2015/05/11 职场文书
法院执行局工作总结
2015/08/11 职场文书
中秋节祝酒词
2015/08/12 职场文书
python 如何用map()函数创建多线程任务
2021/04/07 Python