Vue的import什么时候用大括号

2024-07-13 14:57:38

在Vue.js（以及更广泛的JavaScript ES6模块系统中）中，使用大括号{}进行import操作的场景通常是在你想要从模块中导入具体的导出项时。这种导入方式被称为“命名导入”（Named Imports）。

当你使用命名导入时，你需要知道模块中导出的具体变量名、函数名、类名等，并在大括号中指定它们。这种方式允许你从模块中导入多个特定的导出项。

示例：

假设有一个名为utils.js的文件，它导出了两个函数：

// utils.js  
export function sum(a, b) {  
  return a + b;  
}  
  
export function multiply(a, b) {  
  return a * b;  
}

你可以在另一个文件中使用大括号来导入这两个特定的函数：

// App.vue 或其他任何.js文件  
import { sum, multiply } from './utils';  
  
console.log(sum(2, 3)); // 输出: 5  
console.log(multiply(2, 3)); // 输出: 6

与命名导入相对的是默认导入（Default Imports），这种情况下不使用大括号。默认导入用于导入模块中默认导出的项（通常是一个值、函数、类等）。如果一个模块只有一个主要的导出项，通常会使用默认导出。

示例：

修改utils.js以使用默认导出：

// utils.js  
function sum(a, b) {  
  return a + b;  
}  
  
export default sum; // 现在sum是默认导出的

然后在另一个文件中使用默认导入：

// App.vue 或其他任何.js文件  
import sum from './utils'; // 注意这里没有使用大括号  
  
console.log(sum(2, 3)); // 输出: 5

码农公寓