专业编程教程与实战项目分享平台

网站首页 > 技术文章 正文

前端流行框架Vue3教程:12. 组件的注册方式

ins518 2025-05-10 22:29:45 技术文章 3 ℃ 0 评论

组件的注册方式

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

  • 全局注册

main.js

import {createApp} from'vue'
import App from'./App.vue'
import Globalcomponent from "./components/Globalcomponent.vue"
const app = createApp(App);
app.component("GlobalComponent",GlobalComponent)
app.mount('#app');

xx.vue

<template>
  <h3>全局应用组件</h3>
</template>
  • 局部注册

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

    • 全局注册,但并没有被使用的组件无法在生产打包时被自动移除(也叫"tree-shaking”)。如果你全局注册了一个组件,即使它并没有被实际使用,它仍然会出现在打包后的JS文件中
    • 全局注册在大型项目中使项目的依赖关系变得不那么明确。在父组件中使用子组件时,不太容易定位子组件的实现。和使用过多的全局变量一样,这可能会影响应用长期的可维护性

局部注册需要使用components选项

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表