时间： 分类：   字数： 768 字 阅读： 2分钟
标签：

随着新版本的Vue3现在，开始学习新的更新如何改变我们编写代码的方式是有用的。一个示例是我们编写index.js文件方式的更改（处理创建我们的Vue应用程序的文件）。

本文介绍如何注册能够在整个 Vue 应用中使用的 Vue3 全局组件。与 Vue2 的声明方式稍有不同，但是非常简单。

什么是 VUE 全局组件？

首先要了解什么是 Vue3 全局组件及其作用。

通常当我们想在 Vue 实例中包含一个组件时，会在本地注册它。像是这样：

//ChildComponent.vue
<script>
import PopupWindow from '../components/PopupWindow.vue';

export default {
  components: {
    PopupWindow
  }
}
</script>

但是假设我们要在整个Vue项目中多次使用某一个组件，那么在每个文件中都去注册这个组件会很麻烦，尤其当在我们重构了项目或进行某些操作时。

这时全局注册组件的优势就凸显出来了，它可以在我们的主根 Vue 实例的所有子组件中访问。换句话说，在全局范围内注册组件意味着我们不必将其分别导入每个文件中。

先我们看一下在 Vue2 中是怎么做的：

Vue2 中的全局组件是怎样工作的

在 Vue2 中必须调用 Vue.component 方法来注册全局组件。

这个方法有两个参数：

  1. 全局组件的名称

  2. 我们的组件本身

这是一个简单的例子：

//index.js
import Vue from 'vue'
import PopupWindow from './components/PopupWindow'
import App from './App.vue'

Vue.component('PopupWindow', PopupWindow) // 全局注册，可以用在任何地方

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

这时这个 popupwindow 组件可用于当前 Vue 实例的所有子项，非常简单。

在 Vue3 中是怎样做的？

在Vue3中，由于创建 Vue 实例（使用 createApp）的工作方式略有不同，素以代码也有些区别，但是很容易理解。

首先必须创建应用，而不是从 Vue 对象中声明全局组件。然后就可以像以前一样运行相同的 .component 方法。

index.jsimport { createApp } from 'vue'
import PopupWindow from './components/PopupWindow'
import App from "./App.vue"

const app = createApp(App)

app.component('PopupWindow', PopupWindow) // 全局注册，可以用在任何地方

app.mount('#app')

看上去它非常相似，但是 Vue 实例的初始化方式略有不同，所以也要对代码进行一些修改。

总结

现在可以在任意 VUE 组件中使用了，这可以帮你保持代码的整洁。

在使用全局组件与本地组件时要仔细考虑。如果使所有的组建全都成为全局组件，那么即使在不使用某个组件时，它会被构建到项目中，这会增加页面的加载时间。

0%