组件注册
组件必须先注册才能被使用。
全局注册
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 组件适合全局注册
