组件注册

• 组件注册有两种方式：全局注册和局部注册。

• 全局注册

• 使用 Vue 应用实例的 .component() 方法，让组件在当前 Vue 应用中全局可用。

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、全局注册组件并没有被实际使用，它仍然会出现在打包后的 JS 文件中。
• 2、全局注册在大型项目中使项目的依赖关系变得不那么明确。，可能会影响应用长期的可维护性。
• 在使用 <script setup> 的单文件组件中，导入的组件可以直接在模板中使用，无需注册：

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

<template>
  <ComponentA />
</template>

• 如果没有使用 <script setup>，则需要使用 components 选项来显式注册：

import ComponentA from './ComponentA.js'

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