组件注册

本页假设您已经阅读了组件基础。如果您是组件的新手，请先阅读。

Vue组件需要“注册”，以便Vue在遇到模板时知道其实现的位置。注册组件有两种方式：全局和本地。

全局注册

我们可以使用.component()方法在当前Vue应用中全局提供组件

import { createApp } from 'vue'

const app = createApp({})

app.component(
  // the registered name
  'MyComponent',
  // the implementation
  {
    /* ... */
  }
)

如果使用SFC，您将注册导入的.vue文件

import MyComponent from './App.vue'

app.component('MyComponent', MyComponent)

.component()方法可以链式调用

app
  .component('ComponentA', ComponentA)
  .component('ComponentB', ComponentB)
  .component('ComponentC', ComponentC)

全局注册的组件可以在应用中任何组件的模板中使用

template

<!-- this will work in any component inside the app -->
<ComponentA/>
<ComponentB/>
<ComponentC/>

这甚至适用于所有子组件，这意味着这三个组件也将彼此内部可用。

本地注册

虽然方便，但全局注册有一些缺点

全局注册阻止构建系统删除未使用的组件（称为“摇树优化”）。如果您全局注册了一个组件，但最终在任何地方都没有使用它，它仍然会被包含在最终的包中。
全局注册使大型应用中的依赖关系更不明确。这使得从父组件中查找使用子组件的实现变得困难。这可能会影响长期的维护，类似于使用过多的全局变量。

本地注册将注册组件的可用性限制在当前组件。这使得依赖关系更明确，并且更友好地支持“摇树优化”。

当使用带有<script setup>的SFC时，导入的组件可以局部使用，无需注册

vue

<script setup>
import ComponentA from './ComponentA.vue'
</script>

<template>
  <ComponentA />
</template>

在非<script setup>中，您需要使用components选项

import ComponentA from './ComponentA.js'

export default {
  components: {
    ComponentA
  },
  setup() {
    // ...
  }
}

本地注册使用components选项完成

vue

<script>
import ComponentA from './ComponentA.vue'

export default {
  components: {
    ComponentA
  }
}
</script>

<template>
  <ComponentA />
</template>

对于components对象中的每个属性，键将是组件的注册名称，而值将包含组件的实现。上述示例使用ES2015属性简写，等同于

export default {
  components: {
    ComponentA: ComponentA
  }
  // ...
}

请注意，本地注册的组件在子组件或后代组件中不可用。在这种情况下，ComponentA仅对当前组件可用，而不对其任何子组件或后代组件可用。

组件命名首字母大写

在本指南中，我们使用PascalCase命名来注册组件。这是因为

PascalCase命名是有效的JavaScript标识符。这使得在JavaScript中导入和注册组件更加容易。它还有助于IDE的自动完成。
<PascalCase />使得更明显地看出这是一个Vue组件，而不是模板中的原生HTML元素。它还区分了Vue组件和自定义元素（Web组件）。

这是处理SFC或字符串模板时的推荐样式。然而，如in-DOM模板解析注意事项中所述，PascalCase标签在in-DOM模板中不可用。

幸运的是，Vue支持将kebab-case标签解析为使用PascalCase注册的组件。这意味着注册为MyComponent的组件可以通过<MyComponent>和<my-component>在模板中引用。这允许我们无论模板来源如何，都使用相同的JavaScript组件注册代码。

在GitHub上编辑此页面

组件注册 ​

全局注册 ​

本地注册 ​

组件命名首字母大写 ​

组件注册

全局注册

本地注册

组件命名首字母大写