Vue学习24_Vue中ES6的模块化实现

Vue中ES6的模块化实现

1. 模块化导出：
   示例代码：在a.js文件夹定义的变量要在b.js文件夹中使用到，需要在a.js文件夹中以模块的形式导出，并且在b.js文件中导入才能够使用，下面代码分别定义了一些变量，以及函数，以export各自导出：

let name = '小明'
let age = 18
let flag = true

if (flag) {
    console.log(name);
}
function sum(num1, num2) {
    return num1 + num2
}
//导出变量
export {
    flag,
    sum
}
// 导出函数
export function result(num1, num2) {
    return num1 * num2
}
// 导出类
export class Person {
    run() {
        console.log('在奔跑');
    }
}
// 导出不命名
const telephone = '110'
// export default导出的有且只有一个
export default telephone

2. 模块化导入：
   示例代码1：

let name = '小红'
let flag = false

// 导入类
import {
    Person
} from './a.js'

const p = new Person
p.run()

// 导入函数
import {
    result
} from './a.js'
console.log(result(2, 3));

// 导入未命名的
import tel from './a.js'
console.log(tel);

export default function showMessage() {
    console.log('张大宝');
}

示例代码2

import {
    flag,
    sum
} from './a.js'
if (flag) {
    console.log('zyt');
    console.log(sum(1, 1));
}

// 导入默认未命名函数，不需要加大括号，并且变量名可以自己定义
import show from './b.js'
show()

// 全部导出
// 其中a就是自己起的别名
import * as a from './a.js'
// 取变量
console.log(a.result(3, 3));