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实现浏览器菜单命令
Sep 05 Javascript
jQuery侧边栏随窗口滚动实现方法
Mar 04 Javascript
javascript中全局对象的parseInt()方法使用介绍
Dec 19 Javascript
JavaScript中九种常用排序算法
Sep 02 Javascript
JavaScript中的操作符==与===介绍
Dec 31 Javascript
jQuery+CSS3实现树叶飘落特效
Feb 01 Javascript
jquery实现简单的表单验证
Nov 17 Javascript
js传值后台中文出现乱码的解决方法
Jun 30 Javascript
基于js对象,操作属性、方法详解
Aug 11 Javascript
再谈javascript常见错误及解决方法
Sep 16 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
Mar 21 Javascript
vue postcss-px2rem 自适应布局
May 15 Vue.js
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图片处理:加水印、缩略图的实现(自定义函数:watermark、thumbnail)
2010/12/02 PHP
深入PHP运行环境配置的详解
2013/06/04 PHP
PHP字符串比较函数strcmp()和strcasecmp()使用总结
2014/11/19 PHP
PHP实现下载远程图片保存到本地的方法
2017/06/19 PHP
Laravel 错误提示本地化的实现
2019/10/22 PHP
js 鼠标拖动对象 可让任何div实现拖动效果
2009/11/09 Javascript
JS代码放在head和body中的区别分析
2011/12/01 Javascript
通过jQuery源码学习javascript(三)
2012/12/27 Javascript
简单的Jquery全选功能
2013/11/07 Javascript
require.js的用法详解
2015/10/20 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
2016/08/01 Javascript
动态JavaScript所造成一些你不知道的危害
2016/09/25 Javascript
jQuery实现字体颜色渐变效果的方法
2017/03/29 jQuery
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
2020/08/09 Javascript
解决iview打包时UglifyJs报错的问题
2018/03/07 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
2019/10/11 Javascript
[53:15]Newbee vs Pain 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[01:10:49]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
Python 实现在文件中的每一行添加一个逗号
2018/04/29 Python
利用Python制作动态排名图的实现代码
2020/04/09 Python
python 实现图像快速替换某种颜色
2020/06/04 Python
Python读写csv文件流程及异常解决
2020/10/20 Python
HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
2012/12/09 HTML / CSS
女子锻炼服装和瑜伽服装:Splits59
2019/03/04 全球购物
.net C#面试题
2012/08/28 面试题
机械制造与自动化应届生求职信
2013/11/16 职场文书
澳大利亚商务邀请函
2014/01/17 职场文书
十一酒店活动方案
2014/02/20 职场文书
《夸父追日》教学反思
2014/02/26 职场文书
质量承诺书怎么写
2014/05/24 职场文书
私营公司诉讼代理委托书范本
2014/09/13 职场文书
会计工作能力自我评价
2015/03/05 职场文书
公司处罚决定书
2015/06/24 职场文书
go原生库的中bytes.Buffer用法
2021/04/25 Golang
python之json文件转xml文件案例讲解
2021/08/07 Python
python中mongodb包操作数据库
2022/04/19 Python