Vue组件按需加载原理及自动引入方法详解？

本文共计1288个文字，预计阅读时间需要6分钟。

目录全局注册局部注册局部自动注册不同方案对比关于组件名参考总结在Vue中，我们可以通过全局组件和局部组件的注册方式来使用组件。以下是具体说明：全局注册、局部注册、局部自动注册、不同方案对比、关于组件名、参考、总结。

目录

• 全局注册
• 局部注册
• 局部自动注册
• 不同方案对比
• 关于组件名
• 参考
• 总结

在Vue中我们可以通过全局组件、局部注册的方式来使用组件

全局注册

通过app.component来创建全局组件

import { createApp } from 'vue' import HelloWorld from './components/HelloWorld' const app = createApp({}) // 全局注册一个名为hello-wolrd的组件 app.component('hello-wolrd', HelloWorld);

一旦我们全局注册了组件，我们就可以在任何地方使用这个组件：<hello-wolrd/>

值得注意的是全局注册会使Vue失去TypeScript的支持, Vue 3 有一个 PR 扩展了全局组件的接口。