持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第4天,点击查看活动详情
前言
对于组件的使用场景以及频率来说,有些组件使用的比较频繁,很多模块都可以使用这个组件,而有些组件,仅限于当前业务模块使用,我们就可以根据情况来进行相应的全局注册或者局部注册。而如何注册以及相较于局部注册,全局注册又带来了什么问题呢?下面我们就来看一看。
全局注册
全局组件的话我们可以使用vue实例提供的component
方法进行注册,以便该组件可以被其他任意组件在内部使用。
import { createApp } from 'vue'
import ComponentA from './component'
const app = createApp({})
app.component(
// 注册的名字
'ComponentA',
// 组件的实现
ComponentA
)
而且他也是可以进行链式调用的。
app
.component('ComponentA', ComponentA)
.component('ComponentB', ComponentB)
.component('ComponentC', ComponentC)
局部注册
局部注册的话,只需要在需要使用子组件的父组件中进行注册即可。在<script setup>
中直接导入相应的组件即可在模板中使用。
<script setup>
import ComponentA from './ComponentA.vue'
</script>
<template>
<ComponentA />
</template>
二者的优缺点
-
对于全局注册的组件来说,在组件的使用上变得更加方便,但与之带来问题的就是在一些业务比较复杂的大型项目中,二者的依赖关系变得模糊。要定位相应的全局组件时,也变得比较麻烦,对于项目的长期维护来说,难度也会进行相应的增长。
-
相比之下,局部注册组件的方式使二者之间的依赖关系变得更加清晰。而对于需要使用多个组件的模块,则会抒写较多的导入组件的代码。
-
还有一点需要注意的是,全局注册的组件,即使你并没有使用,他也会打包到相应的js文件中,并不会对没有使用的组件进行自动移除(tree-shaking)。
-
而局部注册的组件对于tree-shaking更加的友好。