下面我会详细讲解“Vue export import 导入导出的多种方式与区别介绍”的完整攻略。

1. Vue export import

在 Vue 中，我们经常需要在组件或模块之间共享代码，而 Vue 提供了 export 和 import 关键字来实现这个功能。

1.1 export

export 是一个 ES6 中的关键字，用于将模块中的变量、函数、类等导出，在其他地方可以使用 import 引入导出的内容。

export 可以有多个形式，下面列举几种常见方式：

1.1.1 命名导出

命名导出是最常用的导出方式，适用于只导出一个模块的情况。

示例代码：

// 导出变量
export const name = 'Tom';

// 导出函数
export function add(num1, num2) {
  return num1 + num2;
}

// 导出类
export class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

1.1.2 默认导出

默认导出适用于只导出一个对象的情况，一个模块只能有一个默认导出。

示例代码：

// 导出对象
const user = {
  name: 'Tom',
  age: 18
};
export default user;

// 导出函数
function sayHello() {
  console.log('Hello');
}
export default sayHello;

// 导出类
export default class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

1.1.3 全局导出

全局导出适用于需要将模块中的变量、函数、类等注册到全局作用域中的情况。

示例代码：

// 导出变量
const name = 'Tom';
window.name = name;

// 导出函数
function sayHello() {
  console.log('Hello');
}
window.sayHello = sayHello;

// 导出类
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}
window.Person = Person;

1.2 import

import 也是一个 ES6 中的关键字，用于从其他模块中导入某些指定的内容，必须与 export 配合使用。

import 也有多种形式，下面列举几种常见方式：

1.2.1 命名导入

命名导入用于导入其他模块中的命名导出内容。

示例代码：

// 导入命名导出的变量
import { name } from './user';
console.log(name);

// 导入命名导出的函数
import { add } from './math';
console.log(add(1, 2));

// 导入命名导出的类
import { Person } from './person';
const person = new Person('Tom', 18);
console.log(person);

1.2.2 默认导入

默认导入用于导入其他模块中的默认导出内容。

示例代码：

// 导入对象
import user from './user';
console.log(user);

// 导入函数
import sayHello from './utils';
sayHello();

// 导入类
import Person from './person';
const person = new Person('Tom', 18);
console.log(person);

1.2.3 混合导入

混合导入用于同时导入其他模块中的多个命名导出内容。

示例代码：

// 导入多个命名导出
import { name, age } from './user';
console.log(name, age);

// 导入多个命名导出并重命名
import { add as sum, minus as sub } from './math';
console.log(sum(1, 2), sub(2, 1));