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 相关文章推荐
javascript globalStorage类代码
Jun 04 Javascript
ExtJS GridPanel 根据条件改变字体颜色
Mar 08 Javascript
从URL中提取参数与将对象转换为URL查询参数的实现代码
Jan 12 Javascript
基于jQuery的图片左右无缝滚动插件
May 23 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
Jan 27 Javascript
AngularJS 中的指令实践开发指南(一)
Mar 20 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
Sep 05 Javascript
JavaScript实现垂直向上无缝滚动特效代码
Nov 23 Javascript
利用jquery禁止外层滚动条的滚动
Jan 05 Javascript
QQ跳转支付宝并自动领红包脚本(最新)
Jun 22 Javascript
vue1.0和vue2.0的watch监听事件写法详解
Sep 11 Javascript
CKEditor4配置与开发详细中文说明文档
Oct 08 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下封装较好的数字分页方法
2010/11/23 PHP
PHP框架Laravel中实现supervisor执行异步进程的方法
2017/06/07 PHP
PHP 多任务秒级定时器的实现方法
2018/05/13 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
javascript中获取选中对象的类型
2007/04/02 Javascript
JavaScript XML操作 封装类
2009/07/01 Javascript
js 幻灯片的实现
2011/12/06 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
2012/05/20 Javascript
JS实现标签页效果(配合css)
2013/04/03 Javascript
JavaScript学习笔记之Cookie对象
2015/01/22 Javascript
js实现iframe自动自适应高度的方法
2015/02/17 Javascript
JavaScript动态添加style节点的方法
2015/06/09 Javascript
JS选中checkbox后获取table内一行TD所有数据的方法
2015/07/01 Javascript
编写高性能Javascript代码的N条建议
2015/10/12 Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
2016/05/28 Javascript
Javascript中prototype的使用详解
2016/06/18 Javascript
BootStrap 弹出层代码
2017/02/09 Javascript
Vue2.0利用vue-resource上传文件到七牛的实例代码
2017/07/28 Javascript
使用electron将vue-cli项目打包成exe的方法
2018/09/29 Javascript
Vue 子组件与数据传递问题及注意事项
2019/07/11 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
2019/07/29 Javascript
jQuery pager.js 插件动态分页功能实例分析
2019/08/02 jQuery
在layer弹层layer.prompt中,修改placeholder的实现方法
2019/09/27 Javascript
关于ES6尾调用优化的使用
2020/09/11 Javascript
手写Vue2.0 数据劫持的示例
2021/03/04 Vue.js
[00:29]2019完美世界全国高校联赛(秋季赛)总决赛海口落幕
2019/12/10 DOTA
python实现堆栈与队列的方法
2015/01/15 Python
基于Python对象引用、可变性和垃圾回收详解
2017/08/21 Python
django加载本地html的方法
2018/05/27 Python
Python后台管理员管理前台会员信息的讲解
2019/01/28 Python
通过实例解析Python调用json模块
2019/12/11 Python
python多线程实现代码(模拟银行服务操作流程)
2020/01/13 Python
python 识别登录验证码图片功能的实现代码(完整代码)
2020/07/03 Python
涉外经济法专业毕业生推荐信
2013/11/24 职场文书
工艺技术员岗位职责
2015/02/04 职场文书
详解PHP用mb_string处理windows中文字符
2021/05/26 PHP