跳至主要內容

组件注册

刘春龙原创...大约 1 分钟WEB前端Vue3教程文档

一个 Vue 组件在使用前需要先被“注册”,这样 Vue 才能在渲染模板时找到其对应的实现。组件注册有两种方式:全局注册和局部注册

局部注册

在Vue3中,引入即注册,组件名为HomeView,只能在当前组件使用

全局注册

首先在 main.ts 文件进行全局注册

import Home from "./views/HomeView.vue"
const app = createApp(App)
app.component('HomeView', Home) 

注册的HomeView组件任意地方都能用,无需再次导入,注册的组件名 HomeView

<template> 
	<HomeView />
</template>

全局注册虽然很方便,但有以下几个问题:

  1. 全局注册后,但并没有被使用的组件无法在生产打包时被自动移除 (也叫“tree-shaking”)。如果你全局注册了一个组件,即使它并没有被实际使用,它仍然会出现在打包后的 JS 文件中
  2. 全局注册在大型项目中使项目的依赖关系变得不那么明确。在父组件中使用子组件时,不太容易定位子组件的实现。和使用过多的全局变量一样,这可能会影响应用长期的可维护性
上次编辑于:
贡献者: 刘春龙
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v2.15.7