亲宝软件园·资讯

展开

VUE中的export default和export使用方法解析

人气:0

export default和export的区别

export主要用于对外输出本模块变量的接口,一个文件就可以被理解为一个模块。export就是导出。

import就是在一个模块中加载另一个含有export接口的模块, import就是导入。

export default和export都能导出一个模块里面的常量,函数,文件,模块等,在其它文件或模块中通过import来导入常量,函数,文件或模块。这样就可以使用它们了。但是,在一个文件或模块中,export,import可以有多个,export default却只能有一个。

通过export方式导出,在导入的时候需要加{}大括号,export default 就不需要{}。

export default简单示例

导出:

// test.js
var info = {
    name: 'zs',
    age: 20
}
export default info

接收:
代码中的test.js为上面的代码文件;aaa可以任意命名,可以在控制台输出info对象

import aaa,  from './test.js'
console.log(aaa)

注意:

1、export default 向外暴露的成员,可以使用任意变量来接收

2、在一个模块中,export default 只允许向外暴露一次

3、在一个模块中,可以同时使用export default 和export 向外暴露成员

4、使用export向外暴露的成员,只能使用{ }的形式来接收,这种形式,叫做【按需导出】

5、export可以向外暴露多个成员,同时,如果某些成员,在import导入时,不需要,可以不在{ }中定义

6、使用export导出的成员,必须严格按照导出时候的名称,来使用{ }按需接收

7、使用export导出的成员,如果想换个变量名称接收,可以使用as来起别名

代码示例

// test.js
var info = {
    name: 'zs',
    age: 20
}
export default info
 
export var title = '小星星'
 
export var content = '哈哈哈'

在下面代码中接收,test.js使用export default 和 export 向外暴露的成员

import person, {title, content as content1} from './test.js'
console.log(person);
console.log(title + '=======' + content1);

加载全部内容

相关教程
猜你喜欢
用户评论