组件注册

组件必须先注册才能被使用。

全局注册

JavaScript

import { createApp } from 'vue'
import App from './App.vue'
import MyComponent from './components/MyComponent.vue'

const app = createApp(App)
app.component('MyComponent', MyComponent)
app.mount('#app')

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

局部注册

JavaScript

import MyComponent from './components/MyComponent.vue'

export default {
  components: {
    MyComponent
  }
}

局部注册的组件仅在当前组件内可用。

对比

特性	全局注册	局部注册
使用范围	全局	当前组件
打包体积	可能被全部打包	按需加载
适用场景	基础组件（按钮、输入框）	业务组件

推荐使用局部注册，有利于代码分割和按需加载。

要点总结

全局注册使用 app.component()
局部注册在 components 选项中声明
局部注册更利于性能优化和代码分割
基础 UI 组件适合全局注册