Vue中组件的三种注册方式

组件的注册

1.全局注册：

在全局注册中，你需要确保在 Vue 根实例之前导入并注册组件。通常，你会在入口文件（例如 main.js）中执行这些操作。

// main.js

import Vue from 'vue';
import App from './App.vue';

// 导入全局组件
import MyComponent from './components/MyComponent.vue';

// 全局注册组件
Vue.component('my-component', MyComponent);

new Vue({
  el: '#app',
  render: h => h(App)
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

2.局部注册：

在局部注册中，你同样需要导入组件，但是这次是在包含这个组件的父组件中。

// MyParentComponent.vue

<template>
  <div>
    <!-- 使用局部注册的组件 -->
    <my-component></my-component>
  </div>
</template>

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

export default {
  components: {
    'my-component': MyComponent
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

3.通过单文件组件注册：

单文件组件通常也需要通过 import 语句导入。你可以将单文件组件的路径直接导入并在需要的地方注册。

// MyParentComponent.vue

<template>
  <div>
    <!-- 使用单文件组件 -->
    <my-component></my-component>
  </div>
</template>

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

export default {
  components: {
    'my-component': MyComponent
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

单文件组件注册和局部注册都属于局部注册的方式，它们的主要区别在于组件的定义和管理方式：

1. 局部注册：
   • 局部注册是指在一个组件内部，将其他组件注册为该组件的子组件，使这些组件仅在当前组件的范围内可用。
   • 局部注册通常在一个父组件内，通过在父组件的 components 选项中注册子组件来实现。
   • 局部注册适用于较小的组件或者那些只在父组件内部使用的组件。这种方式使组件的依赖关系更明确，且不会污染全局命名空间。
   • 局部注册的组件可以在模板中直接使用，无需额外的导入语句，因为它们已经在父组件的作用域内注册过了。
2. 单文件组件注册：
   • 单文件组件是一种将组件的模板、脚本和样式封装在一个独立的文件中的方式。通常，单文件组件使用 .vue 扩展名。
   • 单文件组件需要在使用它们的地方通过 import 语句导入，并在需要的地方注册。
   • 单文件组件适用于大型项目或需要多个地方复用的组件。这种方式将组件的结构、样式和逻辑分离，使代码更易于组织和维护。
   • 单文件组件的注册通常需要在父组件的 components 选项中注册，就像局部注册一样，但需要使用 import 语句将组件导入。

总之，局部注册是一种将组件注册在父组件内部的方式，适用于小型或局部的组件关系，无需额外的导入语句。而单文件组件注册是一种将组件定义在独立文件中，并在需要的地方通过 import 导入和注册的方式，适用于大型项目或需要多个地方复用的组件。选择哪种方式取决于项目的需求和组件的复杂性。