Vue的导入(import)和导出(export、export default)_vue import export-程序员宅基地

技术标签: import  Web  vue  export  

一、import

import在引入文件路径时,引入一个依赖包,不需要相对路径。如:import app from ‘app’;,但引入一个自己写的js文件,是需要相对路径的。如:import app from ‘./app.js’;

引入第三方插件
import Vue from 'vue';
import echarts from 'echarts';
import ElementUI from 'element-ui';
导入css文件
import 'vue-video-player/src/custom-theme.css';
import 'video.js/dist/video-js.css';
import 'iview/dist/styles/iview.css';

如果是在.vue文件中,需要在其外面套一个style

<style>
  @import './test.css';
</style>
导入组件
import name1 from './name1';
import name2 from './name2';
import App from './app.vue';
components:{
    
  name1,
  name2,
  App,
},
import '@…'的语句

@等价于/src这个目录,避免写麻烦而又易错的相对路径

引入工具类
//第一种是引入单个方法
import {
    axiosfetch} from './util';
//下面是方法,需要export导出
export function axiosfetch(options) {
    }

//第二种是导入成组的方法
import * as tools from './libs/tools'
//其中tools.js中有多个export方法,把tools里所有export的方法导入
//vue中怎么用呢?
//Vue.prototype.$tools = tools
//直接用 this.$tools.method调用就可以了 

export和export default的区别:

//先是 export 
import {
    axiosfetch} from './util';  //需要加花括号,可以一次导入多个也可以一次导入一个,但都要加括号
//如果是两个方法
import {
    axiosfetch,post} from './util'; 
//再是 export default 
import axiosfetch from './util';  //不需要加花括号,只能一个一个导入

二、export和export default

export 与import是es6中新增模块功能最主要的两个命令:
1.export与export default均可用于导出常量、变量、函数、文件、模块等;
2.在一个文件或模块中,export、import可以有多个,但export default仅有一个;
3.通过export方式导出,在导入(import)时要加花括号{ },export default则不需要话跨好{ }。

使用export导出的变量需要用{}进行导入

导出常量str和导出函数log:

//a.js
export const str = "blablabla~";
export function log(sth) {
    
	return sth;
}

对应的导入常量str和函数log的方式:

//b.js
import {
     str, log as _log } from 'a'; //也可以分开写两次,导入的时候带花括号。还可以用as重命名
使用export default导出的变量,只需要自己起一个名字就行

导出变量obj(一个对象)

//a.js :
var obj = {
     name: ‘example’ }; 
export default obj; 

对应的导入变量obj,并命其名为newName

//b.js: 
import newNname from './a.js';   //newNname 是自己随便取的名字,这里可以随便命名
console.log(newNname.name);       // example;
总结

export和export default最大的区别就是export不限导出的变量数,可以一直写,在同一个js文件中可以有多个,而export default只输出一次,在同一个js文件中只能有一个。而且 export导出的变量想要导入使用必须使用大括号{}来盛放,而export default不需要,只要import任意一个名字来接收对象即可。

部分导出导入和全部导出导入

部分导出导入

部分导出导入的优势,在于,当资源比较大时,使用部分导出可以减少资源体积,比如element-ui官方就推荐使用部分导入来减少项目体积,因为element-ui是一个十分庞大的框架,如果我们只用到其中的一部分组件, 那么只将用到的组件导入就可以了。

部分导出

//部分导出
//A.js
export function helloWorld(){
    
 conselo.log("Hello World");
}
export function test(){
    
 conselo.log("this's test function");
}

部分导入

//部分导入
//B.js
import {
    helloWorld} from "./A.js" //只导入A.js中的helloWorld方法,是为部分导入
helloWorld(); //执行utils.js中的helloWorld方法

如果我们需要A.js中的全部资源,则可以全部导入,如下:

import * as _A from "./A.js" //导入全部的资源,_A为别名,在调用时使用
_A.helloWorld(); //执行A.js中的helloWorld方法
_A.test(); //执行A.js中的test方法
全部导出导入

如果使用全部导出,那么使用者在导入时则必须全部导入,推荐在写方法库时使用部分导出,从而将全部导入或者部分导入的权力留给使用者。需要注意的是:一个js文件中可以有多个export,但只能有一个export default

全部导出

//全部导出  A.js
var helloWorld=function(){
    
 conselo.log("Hello World");
}
var test=function(){
    
 conselo.log("this's test function");
}
export default{
    
 helloWorld,
 test
}

全部导入

//全部导入  B.js
import A from "./A.js"
A.helloWorld();
A.test();

四、module.exports和exports

模块的导出导入规范,在总体上区分为两类:CommonJS模块规范和ES6模块规范。require: 是node 和 es6 都支持的引入,export/export default/ import: 是只有es6 支持的导出导入,module.exports / exports: 是只有 node 支持的导出。

CommonJS规范

Node里面的模块系统遵循的是CommonJS规范。CommonJS定义的模块分为: 模块标识(module)、模块定义(exports) 、模块引用(require)。为了方便,Node为每个模块提供一个exports变量,指向module.exports。这等同在每个模块头部,有一行这样的命令。

var exports = module.exports;

具体的可参考测试代码
新建utils.js

console.log('1=', module.exports); // 结果为:{}
console.log('2=', exports); // 结果为:{}

exports.a = 200; // 由于默认 exports=module.exports 故此时把module.exports的值也改变了 {a : 200}

console.log('3=', module.exports) // {a : 200}
console.log('4=', exports) // {a : 200}

exports = '我不在指向module'

console.log('5=', module.exports) // {a : 200}
console.log('6=', exports) // 我不在指向module

新建test.js引入utils.js

var util = require('./utils')

console.log('test=', util) // { a: 200 }

从上面可以看出,其实require导出的内容是module.exports的指向的内存块内容,并不是exports的。简而言之,区分他们之间的区别就是 exports 只是 module.exports的引用,辅助后者添加内容用的。好多建议尽量都用 module.exports 导出,然后用require导入。

示例代码
hello.js

!function(){
    
  module.exports = function(name,age,money) {
    
    this.name = name;
    this.age = age;
    this.money = money;
    this.say = function() {
    
      console.log('我的名字叫:'+this.name+',我今年'+this.age+'岁,月薪为:'+this.money+'元;')
    }
  };
}()

hello2.js

module.exports = function(name,age,money) {
    
  this.name = name;
  this.age = age;
  this.money = money;
  this.say = function() {
    
    console.log('我的名字叫:'+this.name+',我今年'+this.age+'岁,月薪为:'+this.money+'元;')
  }
};

hello3.js

function sayDog () {
    
  console.log('i am dog')
}

function sayCat () {
    
  console.log('i am cat')
}

exports.sayDog = sayDog
exports.sayCat = sayCat

index.js

var Hello = require('./hello');
var hello = new Hello('jone','28','10000')
hello.say(); 

var Hello2 = require('./hello2');
var hello2 = new Hello2('hello2','28','10000')
hello2.say(); 

var h3 = require('./hello3')
h3.sayDog()
h3.sayCat()

输入结果如下
在这里插入图片描述

ES6规范

不同于CommonJS,ES6使用 export 和 import 来导出、导入模块。在我们的项目中 使用场景如api的封装。

/*
 * 帮助文档查询api
 * @Author: shichangchun
 * @Date: 2018年8月30日14:22:15
 */
import fetch from '@/util/fetch'

/**
 * 查询文章 add 2018-10-19
 */
export const getArticleByPath = (data) => {
    
  return fetch({
    
    url: '/api/help/contentTxtByPath',
    method: 'GET',
    params: data
  })
}

/**
 * 查询目录 add 2018-10-19
 */
export const getMuneByPath = (data) => {
    
  return fetch({
    
    url: '/api/help/contentNewByPath',
    method: 'GET',
    params: data
  })
}

/**
 * 首页查询
 * @param data
 */
export const getHelpList = (data) => {
    
  return fetch({
    
    url: '/api/help/catalogByPath',
    method: 'GET',
    params: data
  })
}

在组件中引用
在这里插入图片描述
需要特别注意的是,export命令规定的是对外的接口,必须与模块内部的变量建立一一对应关系,即import{ ‘对应名称1’,‘对应名称2’} from ’api‘。使用export default命令,为模块指定默认输出。

另外:
export与export default均可用于导出常量、函数、文件、模块等;
在一个文件或模块中,export、import可以有多个,export default仅有一个;
通过export方式导出,在导入时要加{ },export default则不需要;
export能直接导出变量表达式,export default不行。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/yiminghd2861/article/details/118856597

智能推荐

升压斩波电路(BOOST电路)_升压斩波电路连续断续状态的临界状态电感-程序员宅基地

文章浏览阅读1.2k次。升压斩波电路(BOOST电路)_升压斩波电路连续断续状态的临界状态电感

配对交易方法_COVID下的自适应配对交易,一种强化学习方法-程序员宅基地

文章浏览阅读1.1k次。配对交易方法Abstract 抽象 This is one of the articles of A.I. Capital Management’s Research Article Series, with the intro article here. This one is about applying RL on market neutral strategies, specifical..._qlearning配对交易

Spring声明式事务配置管理方法_spring事务声明式事务配置方法-程序员宅基地

文章浏览阅读271次。环境配置项目使用SSH架构,现在要添加Spring事务管理功能,针对当前环境,只需要添加Spring 2.0 AOP类库即可。添加方法:点击项目右键->Build Path->Add librarys: 打开_spring事务声明式事务配置方法

python 字符串转为时间戳_python将text类型转为时间戳类型-程序员宅基地

文章浏览阅读1.5k次。方法一>>> text='2016-7-10'>>> d=datetime.datetime.strptime(text, '%Y-%m-%d')>>> t=d.timetuple()>>> stamp=int(time.mktime(t))>>> print stamp1468080000>>>方法二>>> text='2016-7-10'>>> t=time.strptime(te_python将text类型转为时间戳类型

计算机电路基础第三版清华大学出版社答案,清华大学出版社-图书详情-《计算机电路基础(第2版)》...-程序员宅基地

文章浏览阅读2.1k次。前 言本书是根据高等职业教育的特点和计算机各专业及电类有关专业对“计算机电路基础”课程教学的基本要求,结合电路理论、现代模拟电子技术和数字技术的发展编写的。本书注重基础理论和基本方法,在阐明基本物理概念、电路的工作原理和分析方法的同时,力求做到深入浅出、循序渐进,便于自学。书中采用“提示”和“注意”的方法,加深对概念的理解。每章都有小结并附有习题,以便巩固所学知识。“计算机电路基础”是一门既..._计算机电路基础第三版清华大学出版社答案

微信小程序调用微信支付接口总结与实现(java)_wx.payment-程序员宅基地

文章浏览阅读3k次,点赞2次,收藏22次。1,开发前准备小程序appid,商户id,商户密钥(key),付款用户的(openid)申请接入微信商户地址:https://pay.weixin.qq.com/static/applyment_guide/applyment_detail_miniapp.shtml2,开放模式介绍在进行微信支付开发之前,深刻理解微信支付的账号关系非常有助于你使用微信以及微信支付的能力。微信支付对商户开放的所有面对用户使用的api,都是由appid和mch_id成对使用的。微信支付开放的能力主要分2大类,普通模式和_wx.payment

随便推点

科研神器Latex:algorithm2e算法常用技巧小结-程序员宅基地

文章浏览阅读2.4w次,点赞92次,收藏224次。overleaf使用Latex给算法排版,美观大方!_algorithm2e

js中0跟空字符串比较为什么为true_为什么js 用0和空串做对比会通过-程序员宅基地

文章浏览阅读3.4k次。在 JavaScript 里,null,0,””,false,和 undefined 全部彼此相等(==),因为它们的计算值都为 ‘false_为什么js 用0和空串做对比会通过

Qt学习记录(for new study)_qt教程c语言中文网-程序员宅基地

文章浏览阅读364次。此文记录学习QT时收藏的一些网址。博客教程:1、C语言中文网——Qt5编程入门教程2、QT多线程的使用3、跟小豆君学Qt4、天山老妖-Qt开发学习教程5、QTreeWidget的一些基本操作6、QT treeWidget 根据内容改变行颜色,改变单行颜色,制作彩色表格7、QT HTTP POST(JSON数据的组装与解析)8、JSON入门——JSON的组成和解析9、Qt平台下使用QJson解析和构建JSON字符串 10、Qt使用SQLite11、QT5中使用SQLite12、在Qt_qt教程c语言中文网

[Andriod] - Andriod Studio + 逍遥模拟器_如何查看逍遥模拟器app占用哪个端口-程序员宅基地

文章浏览阅读2.7k次。Andriod Studio自身自带的模拟器实在太卡,用Genymotion模拟器又要安装VirtualBox,然后一堆的设置,结果还是卡B。网上下了个逍遥模拟器,这模拟器是游戏专用的,目前正式版的均为Andriod 4.x版本。我使用了内测版的Andriod 5.1版来Debug。Andriod Studio + 逍遥模拟器 的设置方法:(如何安装AS和下载安装逍遥就不说了)1、设置Deploym_如何查看逍遥模拟器app占用哪个端口

最高效的2FA 工具 Authy_1password 2fa-程序员宅基地

文章浏览阅读3.3k次。layout: posttitle: “最高效的2FA 工具 Authy”date: 2020-7-21 1:44:09 +0800categories: 2FA 效率工具 有趣的工具文章目录Google AuthenticatorAuthy云端备份无缝切换设备多终端设备支持加密访问,加密存储全平台支持智能 Watch 解决方案怎么使用?安装使用登录注册动态验证码添加账户备份加密总结之前一片介绍密码管理器工具 1Password 的时候有提到 2FA 工具。1Password 支持 2FA ,._1password 2fa

第一期关于ESP8266EX模块固件库的烧写问题_esp8266ex固件-程序员宅基地

文章浏览阅读2k次。在使用ESP8266EX配置为STA模式时,发送数据过程中,不知道为何突然卡死,硬件重启也没用,发送任何指令都没有响应。为了继续使用WiFi模块只好使用最笨的方法,重新烧写AT固件库。烧写流程:第0步:硬件接线:ESP8266接3.3V电源,IO0引脚接地,ESP8266的TXD引脚接串口的RXD,ESP8266的RXD引脚接串口的TXD,其余引脚可悬空。第一步,准备固件库及烧写软件。固..._esp8266ex固件

推荐文章

热门文章

相关标签