认识 Vue 的 export，export default，import

ES6 模块主要有两个功能：export和import

• export用于对外输出本模块(一个文件可以理解为一个模块)变量的接口
• import用于在一个模块中加载另一个含有export接口的模块

也就是说使用export命令定义了模块的对外接口以后，其他 JS 文件就可以通过import命令加载这个模块(文件)。这几个都是 ES6 的语法。

export 和 import (一个导出一个导入)

一个a.js文件有如下代码

export var name = "李四";

在其它文件里引用如下：

import {name} from "./a.js"  // 路径根据实际情况来
export default {
    data () {
        return {}
    },
    created: function () {
        alert(name) // 弹出"李四"
    }
}

上面的例子是导出单个变量的写法，如果是导出多个变量就应该按照下边的方法，用大括号包裹着需要导出的变量：

var name1 = "李四";
var name2 = "张三";
export { name1, name2 }

在其它文件里引用如下：

import { name1, name2 } from "./a.js"
export default {
    data () {
        return {}
    },
    created: function() {
        alert(name1)
        alert(name2)
    }
}

如果导出的是个函数

function add(x,y) {
    alert(x*y)
}
export { add }

在其他文件里引用如下：

import { add } from "./a.js"
export default {
    data () {
        return { }
    },
    created: function () {
        add(4, 6)
    }
}

export 与 export default

• export与export default均可用于导出常量、函数、文件、模块等
• 可以在其它文件或模块中通过 import + (常量|函数|文件|模块)名的方式，将其导入，以便能够对其进行使用
• 在一个文件或模块中，export，import可以有多个，export default仅有一个
• 通过export方式导出，在导入时要加{}，export default则不需要

var name = "李四";
export { name }
import { name } from "./a.js"
// 可以写成
var name = "李四";
export default name
import name from "./a.js" // 这里 name 不需要大括号

本文来源：
认识Vue 的 export、export default、import