Vue 全局组件与局部组件

全局组件(global components) 是能在整个Vue app的任意模板内使用的组件，在main.js 内调用 component() 方法注册的组件都是全局组件：

import { createApp } from 'vue';
import App from './App.vue';
import BaseBadge from './components/BaseBadge.vue';

const app = createApp(App);

// 注册全局组件，base-badge 能在整个Vue app的任意模板内使用
app.component('base-badge', BaseBadge);

app.mount('#app');

一般而言，组件越多，代码包也就越多，如果这些组件全部注册为全局组件，那么 Vue 需要在加载应用程序时加载全部的组件，浏览器因此一开始就需要下载所有这些组件的代码。 对于大型应用程序，可能会对performance造成影响。

除了可以调用 component() 方法将组件注册为全局组件，也可以在组件内部将计划要使用的组件本地注册为局部组件(local compoents)：

// App.vue
<template>
  <div>
  	<!-- 使用kebab-case 需要加 self-closing tag, PascalCase 不需要 -->
    <!-- <the-header></the-header> -->
    <TheHeader />
    <badge-list></badge-list>
    <user-info
      :full-name="activeUser.name"
      :info-text="activeUser.description"
      :role="activeUser.role"
    ></user-info>
  </div>
</template>

<script>
import TheHeader from './components/TheHeader.vue';
import BadgeList from './components/BadgeList.vue';
import UserInfo from './components/UserInfo.vue';

export default {
  // 注册局部组件
  components: {
    //写成'the-header':TheHeader  也可以
    TheHeader,
    
    // Vue 会自动将 PascalCase 翻译成 kebab-case
    BadgeList,
    UserInfo,
  },
  data() {
    return {
      activeUser: {
        name: 'Maximilian Schwarzmüller',
        description: 'Site owner and admin',
        role: 'admin',
      },
    };
  },
};
</script>

和全局组件不同，局部注册的组件只能在该组件内部使用，不能在任何其他子组件中使用，不能在Vue app的任何其他地方使用。
以上述 App.vue 为例，3 个局部注册的组件 TheHeader，BadgeList 和 UserInfo 只能在这个文件 App.vue 内部使用。