全局注册组件

使用插件的一个原因是通过删除导入并将其替换为对 this 和/或 Vue 的访问来减少所有 Vue 应用程序文件中的样板文件。

Vue.js 组件通常在单文件组件中定义并显式导入。出于与定义全局方法和属性相同的原因，我们可能希望全局注册组件。这将使我们能够在所有其它组件模板中使用这些组件，而无需导入它们并将它们注册到组件(components)属性下。

当使用设计系统或跨代码库使用组件时，这可能非常有用。

全局注册组件有助于某些类型的更新，例如，如果文件名未向消费者公开，则在更改文件名时，只有一个更新路径，而不是每个用户一个。

假设 CustomButton.vue 文件中有一个 CustomButton 组件，如下所示：

<template>
    <button @click="$emit('click', $event)">
        <slot />
    </button>
</template>

我们可以按如下方式全局注册 CustomButton（这通常在 main.js 文件中完成）：

// other imports
import CustomButton from './components/CustomButton.vue'

Vue.component('CustomButton', CustomButton)
// other global instance setup

我们现在可以在 App.vue 文件中使用它，而无需在本地注册或导入它：

<template>
    <div>
        <CustomButton>Click Me</CustomButton>
    </div>
</template>

这将按预期渲染，并带有一个名为 Click Me 的按钮：

Figure 1. Figure 5.8: CustomButton rendering with a Click Me button

至此，我们探索了当组件经常在代码库中使用时，全局注册组件如何减少样板文件。

接下来，我们将了解一些有关如何提高 Vue.js 中组件灵活性的技巧。