一、export 的使用

二、export default 的使用

三、两者之间的区别

区别 1：

区别 2：

区别 3：

在JavaScript ES6中，export 与 export default 均可用于导出常量、函数、文件、模块等，你可以在其它文件或模块中通过 import+(常量 | 函数 | 文件 | 模块)名的方式，将其导入，以便能够对其进行使用

一、export 的使用

定义一个test.js文件

export function a(){console.log('a');
}
export function b(){console.log('b');
}
export let c  = 3;

在index.js文件进行导入操作

// 这里的 a b c 必须以导出变量一致，不能瞎取名
import {a,b,c} from './test.js'
a();    // a
b();    // b
console.log(c); //3
-----------------------------------------------
//可以使用as设置别名,* 号表示所有
import * as test from './test.js'
test.a();   // a
test.b();   // b
console.log(test.c);    //3
-----------------------------------------------
//可以使用as设置别名,设置单个
import {a,b as bb,c} from './test.js'
a();    // a
bb();   // b
console.log(c); //3

二、export default 的使用

那么 export default {} 又是来干嘛的？

假设我们写了一个单页面组件 A 文件，而在另一个文件 B 里面需要用到它，那么就要用 ES6 的 import/export 语法 ，在文件 A 中定义输出接口 export **，在文件 B 中引入 import **，然后再生成一个 Vue 实例 new Vue (**)，把引入的组件用起来，这样就可以复用组件 A 去配合文件 B 生成 html 页面了。

定义一个test.js文件

export default{a:function(){console.log('a');},b:function(){console.log('b');},c : 3
}

在index.js文件进行导入操作

// 这里的 zdy 可以自定义的任何变量，自己取名
import zdy from './test.js'
zdy.a();    // a
zdy.b();    // b
console.log(zdy.c); //3

三、两者之间的区别

区别 1：

一个js文件是可以有多个 export，但是只能有一个export default

区别 2：

通过export方式导出，在导入时要加{}，export default则不需要

区别 3：

使用export default为模块指定默认输出，导入时只需知道文件名即可，但是使用export必须知道导出的变量或函数等，导入时变量名要一致

Vue中的export和export default{}用法相关推荐

vue中关于$emit及propos的用法
vue中关于$emit及propos的用法一:父组件可以使用propos把数据传递给子组件. 父组件:在父组件中的子组件标签中,通过父组件给子组件传递函数类型的props实现:子给父传递数据如: 子 ...
在vue中 storge 和vuex使用的用法区别
在vue中 storge 和vuex使用的用法区别 1.联动性:storge对于属性的改变不能触发其他页面的改动 storage: 存取login之后就不会改变的信息,比如userId, isAdmi ...
vue中关于$emit和.sync的用法
父组件可以使用props 把数据传给子组件. 子组件可以使用 $emit触发父组件的自定义事件而vue中对$emit的定义如下: 触发当前实例上的事件.附加参数都会传给监听器回调. vm.$emit ...
vue中$emit跟$on,$off跟用法
首先新建一个js文件转为两个vue文件的桥梁 bus.js文件注意: 子组件的跟父子间都要引入这个文件(文件中写了注释) import Vue from "vue" export ...
Vue中message.split().reverse().join()函数用法
1.split('') 把一个字符串分割成字符串数组把数据拆分为一个数组,括号里的' '是把数据拆分为每个字符串 2.reverse() 颠倒数组中元素的顺序只作用于数组,跟在split('')后 ...
vue 中的 ... (三个点的用法)
... 是扩展运算符. 扩展语法.对数组和对象而言,就是将运算符后面的变量里东西每一项拆下来. 这个东西可以在函数定义的地方使用,比如使用func(...args)将函数传入的参数都放到args数组里 ...
vue中el-radio-group点击事件，双击取消
vue中el-radio-group点击事件普通用法需要实现双击取消普通用法需要注意,如果@change事件除了当前选中的单选按钮的label值,还需要带上另外的参数,则需要用event来代替 ...
Vue中export和export default的区别和用法
Vue是通过webpack实现的模块化,因此可以使用import来引入模块,例如: import Vue from 'vue' import Router from 'vue-router' ...
Vue 中 export及export default的区别
相信很多人都在vue使用过export.export default.import,然而它们到底有什么区别呢? 在ES6中,export与export default均可用于导出常量.函数.文件.模块 ...

Vue中的export和export default{}用法

一、export 的使用

二、export default 的使用

三、两者之间的区别

区别 1：

区别 2：

区别 3：

Vue中的export和export default{}用法相关推荐

最新文章

热门文章