全局注册 Vue 组件

Posted on by

当我们使用 vue 时，通常会在另一个组件中注册一个组件。在本教程中，我们将了解如何在 Vue 中全局注册一个组件，这样您就不必再次在组件中引用 is ——相反，您可以直接在<template>标签中使用它。

如果您是 Vue 新手，请在开始之前查看我们关于创建您的第一个 Vue 应用程序的指南。

在 Vue 中注册组件#

在 Vue 中看到这样的情况是很正常的，其中一个组件在另一个组件中注册，以便在<template>标签内使用：

<template>
    <MyComponent />
</template>
<script>
import MyComponent from '../components/MyComponent.vue';

export default {
    name: "ParentComponent",
    components: {
        MyComponent
    }
}
</script>

这对于应用程序中可能不需要的组件很有用，但是拥有一个在应用程序中几乎所有地方都使用的组件是很正常的。为了避免在每个文件中引用它，您可以改为全局注册它。

如何在 Vue 中全局注册一个组件#

要在 vue 中全局注册组件，请打开您的main.js文件。您应该看到如下内容：

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

当我们要在 Vue 中全局注册一个组件时，需要在这个文件中进行。您所要做的就是像往常一样导入组件，然后使用app.component.

import { createApp } from 'vue'
import App from './App.vue'

// Import your component
import MyComponent from '../components/MyComponent.vue';

// Your app
const app = createApp(App);

// Globally register your component
app.component('MyComponent', MyComponent);

// Mount your app
app.mount('#app');

现在我们可以在 Vue 应用程序的任何地方引用我们的<MyComponent />组件。app.component()有两个参数——第一个是我们给组件的名称，第二个是导入的组件。

因此，我们现在可以将原始代码简化为：

<template>
    <MyComponent />
</template>
<script>
export default {
    name: "ParentComponent"
}
</script>

推荐阅读：