全局注册

使用 Vue 应用实例的 .component() 方法。

示例：

import { createApp } from 'vue'

const app = createApp({})

app.component(
  // 注册的名字
  'MyComponent',
  // 组件的实现
  {
    /* ... */
  }
)

如果使用单文件组件，你可以注册被导入的 .vue 文件

import MyComponent from './App.vue'
app.component('MyComponent', MyComponent)

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

示例：

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

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

<!-- 这在当前应用的任意组件中都可用 -->
<ComponentA/>
<ComponentB/>
<ComponentC/>

局部注册

1、script setup 使用组件

script setup 的单文件组件中，导入的组件可以直接在模板中使用，无需注册。

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

<template>
  <ComponentA />
</template>

2、setup 函数使用组件则需要使用 components 选项来显式注册。

import ComponentA from './ComponentA.js'

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

组件名格式

使用 PascalCase 作为组件名的注册格式。