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 相关文章推荐
关于二级域名下使用一级域名下的COOKIE的问题
Nov 07 Javascript
使用JavaScript实现Java的List功能(实例讲解)
Nov 07 Javascript
BootStrap智能表单demo示例详解
Jun 13 Javascript
AngularJS  ng-table插件设置排序
Sep 21 Javascript
jQuery基于排序功能实现上移、下移的方法
Nov 26 Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
Feb 05 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
Mar 08 Javascript
angular2中router路由跳转navigate的使用与刷新页面问题详解
May 07 Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
Mar 13 Javascript
vue调试工具vue-devtools安装及使用方法
Nov 07 Javascript
Js生成随机数/随机字符串的方法小结【5种方法】
May 27 Javascript
吃通javascript正则表达式
Apr 21 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/10/12 PHP
PHP中的函数嵌套层数限制分析
2011/06/13 PHP
win7 64位系统 配置php最新版开发环境(php+Apache+mysql)
2014/08/15 PHP
php中解析带中文字符的url函数分享
2015/01/20 PHP
PHP实现的统计数据功能详解
2016/12/06 PHP
PHP合并数组函数array_merge用法分析
2017/02/17 PHP
Yii2.0建立公共方法简单示例
2019/01/29 PHP
window.open的页面如何刷新(父页面)上层页面
2012/12/28 Javascript
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
2013/01/16 Javascript
JS判断是否360安全浏览器极速内核的方法
2015/01/29 Javascript
JQuery EasyUI的使用
2016/02/24 Javascript
微信小程序 wxapp内容组件 icon详细介绍
2016/10/31 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
2016/12/02 Javascript
原生js实现键盘控制div移动且解决停顿问题
2016/12/05 Javascript
微信小程序 swiper制作tab切换实现附源码
2017/01/21 Javascript
Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案
2017/02/23 Javascript
详解本地Node.js服务器作为api服务器的解决办法
2017/02/28 Javascript
Bootstrap modal只加载一次数据的解决办法(推荐)
2017/11/24 Javascript
Vue中mintui的field实现blur和focus事件的方法
2018/08/25 Javascript
JavaScript实现简单音乐播放器
2020/04/17 Javascript
vue router 组件的高级应用实例代码
2019/04/08 Javascript
详解JavaScript实现动态的轮播图效果
2019/04/29 Javascript
javascript中的this作用域详解
2019/07/15 Javascript
JS通用方法触发点击事件代码实例
2020/02/17 Javascript
解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)
2020/10/27 Javascript
[04:49]期待西雅图之战 2016国际邀请赛中国区预选赛WINGS战队赛后采访
2016/06/29 DOTA
Python使用xlwt模块操作Excel的方法详解
2018/03/27 Python
[原创]windows下Anaconda的安装与配置正解(Anaconda入门教程)
2018/04/05 Python
Python判断一个三位数是否为水仙花数的示例
2018/11/13 Python
Python tkinter模版代码实例
2020/02/05 Python
举例详解HTML5中使用JSON格式提交表单
2015/06/16 HTML / CSS
澳大利高级泳装品牌:Bondi Born
2018/05/23 全球购物
C/C++程序员常见面试题一
2012/12/08 面试题
MYSQL相比于其他数据库有哪些特点
2013/07/19 面试题
人力资源专业推荐信
2013/11/29 职场文书
劳资员岗位职责
2015/02/13 职场文书