首页 > 其他 > 详细

【vue】 export、export default、import的用法和区别

时间:2021-03-23 13:39:02      阅读:71      评论:0      收藏:0      [点我收藏+]

ES6的模块化中,export与export default都可以用于导出常量、函数、文件、模块等,我们可以通过在其它文件或模块中import(常量、函数、文件、模块)的方式导入,但在一个文件或模块中,export、import可以有多个,export default仅有一个。

export的使用

1、直接输出

export let words = ‘hello world!!!‘ 

export function output() { 
  // ... 
}

2、先定义在输出

let firstWords = ‘hello‘
let secondWords = ‘world‘
let thirdWords = ‘!!!‘

function output() {
    // ...
}

export {firstWords, secondWords, thirdWords, output}

export default的使用

  • 1、export default 用于规定模块的默认对外接口

  • 2、很显然默认对外接口只能有一个,所以 export default 在同一个模块中只能出现一次

  • 3、export default只能直接输出,不能先定义再输出。

  • 4、其在 import 方式上也和 export 存在一定区别。

对比

export的输出与import输入

export function output() {
    // ...
}

import {output} from ‘./example‘

export default的输出与import输入

export default function output() {
    // ...
}

import output from ‘./example‘

从以上两种 import 方式即可看出,export default 的 import 方式不需要使用大括号包裹。因为对于 export default 其输出的本来就只有一个接口,提供的是模块的默认接口,自然不需要使用大括号包裹。

【vue】 export、export default、import的用法和区别

原文:https://blog.51cto.com/15142266/2669143

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!