Vue的导入import和导出export

• import 语句用于导入模块、组件、库或其他资源。这是 ES6 模块系统的一部分，允许你在不同的文件中组织代码，并在需要时导入这些代码。

导入默认导出

• 如果一个模块使用 export default 导出了一个值，你可以使用以下语法导入它：

import MyComponent from './MyComponent.vue';

导入命名导出

• 如果一个模块使用 export { ... } 导出了多个值，你可以使用以下语法导入它们：

import { ComponentA, ComponentB } from './components';

导入并重命名

• 你可以在导入时重命名导入的值：

import { ComponentA as MyComponentA, ComponentB as MyComponentB } from './components';

导入所有导出并重命名

• 你可以导入一个模块的所有导出，并将它们放在一个对象中：

import * as Components from './components';

导入并直接使用

• 如果你只是想导入一个模块而不需要引用它，可以使用以下语法：

import './styles.css';

动态导入

• 在某些情况下，你可能需要动态导入模块。这可以通过 import() 函数实现，它返回一个 Promise：

import(/* webpackChunkName: "my-component" */ './MyComponent.vue').then(module => {
  const MyComponent = module.default;
  // 使用 MyComponent
});

示例

• 假设你有一个 Vue 组件 MyComponent.vue，它导出了一个默认组件：

<template>
  <div>Hello, World!</div>
</template>

<script>
export default {
  name: 'MyComponent'
};
</script>

• 你可以在另一个组件中导入并使用它：

<template>
  <div>
    <MyComponent />
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  name: 'App',
  components: {
    MyComponent
  }
};
</script>

• import 语句是 Vue.js 项目中组织和重用代码的重要工具。通过正确使用 import，你可以将代码拆分成更小、更易于管理的模块，从而提高代码的可维护性和可读性。