全局注册 Vue 组件

Question

我有一个使用 vue-cli 创建的 vue 应用程序

我创建了一些组件，我想像这样使用它们：

<template>
    <oi-list>
        <oi-list-header>Task ID</oi-list-header>
        <oi-list-header>Tasks Title</oi-list-header> 
        <oi-list-header>Task Status</oi-list-header> 
        <div v-for="task in tasks">
            <oi-list-item>{{ task.id }}</oi-list-item>
            <oi-list-item>{{ task.title }}</oi-list-item>
            <oi-list-item>{{ task.status }}</oi-list-item>
        </div>
    </oi-list>
</tempalte>

我所拥有的问题是我使用列表组件的地方，我必须编写以下内容：

<script>
    import List from '@/components/List'
    import ListHeader from '@/components/ListHeader'
    import ListItem from '@/components/ListItem'

    export default {
    name: "Tasks",
    components: {
        'oi-list': List,
        'oi-list-header': ListHeader,
        'oi-list-item': ListItem
    }
<script>

我想要的是可重用组件要么在全球范围内注册，所以我不必每次我想使用它们时都导入它们及其子组件，或者在我使用它们时如何让它们动态加载。 这可能吗？

我过去使用过 Vuetify ，并且不需要您导入每个组件即可使用它。

请有人能指出我正确的方向吗？ 谢谢。

Answer 1

这很容易实现。 您可以在 main.js 文件中全局注册组件。

import MyComponent from '@/components/MyComponent'

Vue.component('my-component-name', MyComponent)

现在您可以在任何地方使用<my-component-name /> 。

一种更简洁的方法，而不会使您的main.js膨胀，将您的组件导入组件文件夹中的 index.js 文件中，如下所示。

import Vue from 'vue'
import MyComponent from '@/components/MyComponent'

Vue.component('my-component-name', MyComponent)

稍后您可以将此行添加到您的main.js以加载已注册的组件。

import '@/components'

文档： https ://v2.vuejs.org/v2/guide/components-registration.html

Answer 2

作为除了@Odyssee 的答案之外的另一种选择，如果你想避免全局变量，就是创建一个文件，比如globalComponents.js ，其内容如下：

import List from '@/components/List.vue'
import ListHeader from '@/components/ListHeader.vue'
import ListItem from '@/components/ListItem.vue'
export default {
    'oi-list': List,
    'oi-list-header': ListHeader,
    'oi-list-item': ListItem
}

您可以按如下方式使用它：

<script>
    import GlobalComponents from '@/globalComponents.js'

    export default {
    name: "Tasks",
    components: {
        ...GlobalComponents
    }
<script>

Answer 3

多种解决方案的组合，我认为这是最干净的方法：

全局组件.js：

import Vue from 'vue'

const components = {
  'comp1':   () => import('components/comp1'),
  'comp2': () => import('components/comp2'),
}

Object.entries(components).forEach(([name, component]) => Vue.component(name, component))

主.js：

import 'global-components'

Answer 4

更简单的是，您可以像这样导入全局组件：

在你的main.js中。 （注意Vue.component()必须在new Vue()之前调用）

Vue.component(
  'MyComponent', () => import('./components/MyComponent')
)

Answer 5

如果有人希望使用 TypeScript 这样做，可以通过将其与createApp()方法链接来完成

import { createApp } from "vue";
import App from "./App.vue";

import GlobalComponent from "./components/GlobalComponent.vue";

createApp(App)
    .component("global-component", GlobalComponent)
    .mount("#app");

Answer 6

如果与导入的名称相同，则不必重复组件名称。 所以这就足够了：

import FirstComponent from '@/components/FirstComponent'
import SecondComponent from '@/components/SecondComponent'

const components = {
  FirstComponent,
  SecondComponent
}
Object.entries(components).forEach(([name, component]) => Vue.component(name, component))

Answer 7

您可以递归地浏览您的文件并通过其组件名称或文件名导入它们。

 const files = require.context('./', true, /\.vue$/i)

 files.keys().map(key => {
     Vue.component(files(key).default.name ?? key.split('/').pop().split('.')[0], files(key).default);
 })