vue中的默认import 导入和函数导入（在vue中，有的导入用import xxx from ‘@/xxx/xxx‘，有的导入用import {xxx} from ‘@/xxx/xxx‘）

深碍√TFBOYSˉ_ 2024-02-17 12:07 35阅读 0赞

**问题：在vue中，有的导入用import xxx from ‘@/xxx/xxx’，有的导入用import \{xxx\} from '@/xxx/xxx’这两种有什么区别，什么时候加上\{\}，什么时候不加\{\}**

### 两种方式说明 ###

#### 1、默认导入 (Default Imports): ####

import xxx from '@/xxx/xxx';

这种导入方式用于导入模块的默认导出。这意味着在 ‘@/xxx/xxx’ 这个模块中，有一个默认导出的内容（可能是一个函数、对象、类等）。你只能为默认导出使用这种导入方式。

#### 2、命名导入 (Named Imports): ####

import {
         xxx } from '@/xxx/xxx';

这种导入方式用于导入模块中特定命名的导出。例如，在 ‘@/xxx/xxx’ 这个模块中，可能有多个命名导出，而你只想导入其中一个或多个。你可以使用花括号 \{\} 来导入需要的部分。

### 示例 ###

什么时候使用哪种方式？

使用 import xxx from '@/xxx/xxx'; 当你想导入模块的默认导出。
    使用 import { xxx } from '@/xxx/xxx'; 当你想从一个模块中导入一个或多个特定的命名导出。

#### 1、默认导入导出 ####

*  默认导出  
    有关键字default  
    ![在这里插入图片描述][8cacdaf24ad84d1dabe190da8055e751.png]
 *  默认导入  
    ![在这里插入图片描述][06667189156a46a9a788c09f78e29b7d.png]

#### 2、命名导入导出（有函数） ####

*  有命名函数导出  
    有function函数  
    ![在这里插入图片描述][1026e5f565bd440fbb633a6cd0ff1647.png]
 *  命名函数导入  
    ![在这里插入图片描述][634b13f2b7a64b6683e24b2917126e38.png]

结束！！！  
hy:46

--------------------

春风若有怜花意，可否许我再少年。

[8cacdaf24ad84d1dabe190da8055e751.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/0be0a1bc3cf442aaa6cf20c29793c863.png
[06667189156a46a9a788c09f78e29b7d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/0b50ae3debce41308ed52173e64cf8c1.png
[1026e5f565bd440fbb633a6cd0ff1647.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/777ca9d6a28b4bd9bb9fc1bac27e647e.png
[634b13f2b7a64b6683e24b2917126e38.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/9d1d6b4542f44ceeadbf7389df3b7ac3.png