Vue组建的全局注册

局部注册

如果你还没有看过局部注册相关内容，请点击下方链接前往阅读组件的局部注册相关知识。

全局注册的介绍

“全局注册是在应用程序的根级别注册组件，注册后的子组件可以在整个应用程序中使用。如果你无法快速的分清楚局部注册和全局注册，那么请记住，涉及到main.js就是全局注册。

了解了Vue组件全局注册的概念和区别后，接下来我将详细给你讲解全局注册的具体步骤。”

创建子组件

如果你看了我使用了vue工程化开发(如果你不会，我将注册创建vue工程化开发的教程放在下方，你可以点击先去看那一篇文章)，在vue工程化开发中，你将看到一个文件夹叫做components,在这里我们将创建我们的组件 WsArt.vue，然后进行编辑，例如：

<template>
  <div>
    <h1>欢迎阅读</h1>
  </div>
</template>

<script>
export default {

}
</script>

<style>
</style>

导出子组件

在main.js的顶部，使用import语句导入我们刚刚在components中创建的子组件。

import 组件名 from ‘组件名所在的位置‘

import WsArt from ‘./components/WsArt.vue’

全局注册组件

Vue.component(‘WsArt’,WsArt)

main.js的完整格式如下：

import Vue from 'vue'
import app from './App.vue'
import WsArt from './components/WsArt.vue'

Vue.component('WsArt',WsArt)

new Vue({
  render: h => h(app)
}).$mount('#app') 

使用组件

在所有组件范围内的<template></template>标签中使用组件，即：

<template>
  <div id="app">
    <WsArt></WsArt>
  </div>
</template>

全局注册和局部注册的区别

全局注册：

• 作用域：
  • 整个应用程序可用。
• 注册位置：
  • 通常在应用程序的入口文件（例如main.js）中注册。
• 优点：
  • 方便快捷，减少重复导入和注册。
• 缺点：
  • 可能增加打包体积，依赖关系可能不清晰。
• 使用场景：
  • 通用、频繁使用的组件。
• vue3中的使用方法
  • app.component()

局部注册：

• 作用域：
  • 仅在注册它的父组件及其子组件中可用。
• 注册位置：
  • 在需要使用组件的父组件内部注册。
• 优点：
  • 依赖关系明确，有助于减小打包体积，利于tree-shaking。
• 缺点：
  • 对于通用组件，需要在多个组件中重复注册。
• 使用场景：
  • 特定场景、只在少数组件中使用的组件。
• vue3中的使用方法
  • 组件内部的components选项