vue如何导入组件

Vue 导入组件的方法主要有以下几种：1、在单文件组件中使用 import 语句；2、在模板中通过 <script> 标签引入；3、全局注册组件。 下面我们将详细解释每种方法的步骤和使用场景。

一、在单文件组件中使用 import 语句

这种方法是最常用的，尤其是在使用 Vue CLI 创建的项目中。步骤如下：

创建组件文件：首先，我们需要创建一个新的 Vue 组件文件。例如，创建一个名为 MyComponent.vue 的文件。

<!-- MyComponent.vue -->
<template>
  <div>
    <h1>这是一个自定义组件</h1>
  </div>
</template>
<script>
export default {
  name: 'MyComponent'
}
</script>
<style scoped>
h1 {
  color: blue;
}
</style>

导入组件：在需要使用该组件的父组件中，通过 import 语句导入。

<!-- ParentComponent.vue -->
<template>
  <div>
    <MyComponent />
  </div>
</template>
<script>
import MyComponent from './MyComponent.vue';
export default {
  components: {
    MyComponent
  }
}
</script>

这种方法的优点是清晰明了，适用于大多数项目的组件引用需求。