vue 全局组件注册_如何注册vue3全局组件

vue 全局组件注册

With the new versions of Vue3 out now, it’s useful to start learning how the new updates will change the way we write code. One example is the changes in the way we write our index.js file (the file that handles creating our Vue app).

随着新版本Vue3的发布,开始学习新更新将如何改变我们编写代码的方式非常有用。 一个例子是我们编写index.js文件(用于处理创建Vue应用程序的文件)的方式的变化。

Today, we’ll take a look at how to register Vue3 Global Components that can be used across our entire Vue app. It’s a little different from how we declared them in Vue2, but it’s just as simple.

今天,我们将研究如何注册可在整个Vue应用程序中使用的Vue3全局组件。 与我们在Vue2中声明它们的方式稍有不同,但它很简单。

For this tutorial, I am working with the beta release of Vue3 that can be found via the vue-next Github repository.

对于本教程,我正在使用Vue3beta版本 ,可以通过vue-next Github存储库找到它。

Alright. Let’s just get straight to it.

好的。 让我们直接说吧。

什么是Vue全球组件? (What are Vue Global Components?)

First off, we have to understand what a Vue3 global component is and why we might want to use one.


Normally, when we want to include a component inside our Vue instance, we register it locally. That normally looks something like this.

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

import PopupWindow from '../components/PopupWindow.vue';
export default {
components: {

However, let’s say that there is a component that we know we’re going to be using many times across our Vue project. It can get messy to register this component locally inside every file — especially if our project gets refactored or something.

但是,假设有一个组件,我们知道我们将在整个Vue项目中多次使用它。 在每个文件中本地注册此组件可能会很麻烦-尤其是在我们重构了项目或其他内容的情况下。

In this case, it could be useful to globally register the component — making it accessible in all subcomponents of our main root Vue instance. In other words, globally registering a component means that we don’t have to import it in each file.

在这种情况下,全局注册该组件可能会很有用-使它可以在我们的主根Vue实例的所有子组件中访问。 换句话说,全局注册一个组件意味着我们不必将其导入每个文件中。

Let’s take a look at how this is done in Vue2 and how we can do it now in Vue3.


全局组件如何在Vue2中工作 (How global components work in Vue2)

In Vue2, wherever we create our Vue instance, we just have to call a Vue.component method to register a global component.


This method takes two arguments:


1 — the name of our global component


2 — our component itself


Here’s a quick example of what that might look like.


import Vue from 'vue'
import PopupWindow from './components/PopupWindow'
import App from './App.vue'
Vue.component('PopupWindow', PopupWindow) // global registration - can be used anywhere
new Vue({
render: h => h(App)

Now this ‘PopupWindow’ component can be used in all children of this Vue instance! Easy as that.

现在,此“ PopupWindow”组件可以在此Vue实例的所有子级中使用! 那样简单。

现在,在Vue3中呢? (Now, what about in Vue3?)

In Vue3, the code varies slightly just because of creating our Vue instance works a little differently (using createApp), but it is just as simple to understand.


Instead of declaring global components from our Vue object, we first have to create our app. Then, we can run the same .component method as we would before.

首先必须创建应用程序,而不是从Vue对象声明全局组件。 然后,我们可以运行与以前相同的.component方法。

import { createApp } from 'vue'
import PopupWindow from './components/PopupWindow'
import App from "./App.vue"
const app = createApp(App)
app.component('PopupWindow', PopupWindow) // global registration - can be used anywhere

As you can see, it’s very similar, but the slight differences in the way our Vue instance is initialized make us change up our syntax a little bit.


就是这样! (And that’s it!)

There you have it! We can now use our COMPONENT component in any Vue component that comes from this root instance. It’s a great way to keep our code DRY.

你有它! 现在,我们可以在此根实例提供的任何Vue组件中使用COMPONENT组件。 这是使我们的代码保持干燥的好方法。

It’s important to carefully consider when we want to use a global component vs. a local component. If we just make everything a global component by default, it means that even when we’re not using a component, it would still be included in our build — increasing page load times.

重要的是要仔细考虑何时要使用全局组件还是本地组件。 如果我们默认将所有内容都设为全局组件,则意味着即使不使用组件,该组件仍将包含在我们的构建中-增加页面加载时间。

Global components can be a very powerful tool when used properly, and with the new changes in Vue3, it is still very easy to use these types of components in your Vue project.


If you have any questions, leave them in the comments down below.


Happy coding :)



vue 全局组件注册

  • 5
  • 0
  • 3
  • 一键三连
  • 扫一扫,分享海报

评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
©️2021 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页
钱包余额 0