javascript 全局注册vue组件

Registering vue components globally

提问by Brad

I have a vue app that I created using the vue-cli

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

Im creating some components and I want to use them like this:

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

<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>

The probelm I have is where ever I use the list component I have to write the following:

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

<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>

What I would like is for reusable components to either be registered globally so i dont have to import them and their sub components every time i want to use them, or some how have them load dynamically when I use them. Is this possible?

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

I have used Vuetifyin the past and that doesn't require you to import each component in order to use it.

我过去使用过Vuetify，这不需要您导入每个组件来使用它。

Please can someone point me in the right direction? Thanks.

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

采纳答案by Ayush Gupta

As another option in addition to @Ilyas's answer, if you want to avoid globals, is to create a file, say globalComponents.jswith the following contents:

除了@Ilyas 的答案之外，另一个选择是，如果您想避免全局变量，则创建一个文件， 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
}

And you can use it as follows:

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

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

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

回答by Odyssee

This is easy to accomplish. You can register components globally in the main.js file.

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

import MyComponent from '@/components/MyComponent'

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

Now you can use <my-component-name />everywhere.

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

A cleaner way, without bloating your main.js, is to import your component in an index.js file in your components folder like this.

一个更简洁的方法main.js是在你的 components 文件夹中的 index.js 文件中导入你的组件，就像这样。

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

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

Later you can add this line to your main.jsto load the registered components.

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

import '@/components'

the docs: https://vuejs.org/v2/guide/components-registration.html

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

回答by Alvin Konda

Even simpler you may import global components like so:

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

In your main.js. (Note Vue.component()must be called before new Vue())

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

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

回答by Sean Dvir

After seeing all the answers here, I used a combination:

在看到这里的所有答案后，我使用了一个组合：

global-components.js:

global-components.js：

import Vue from 'vue'

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

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

main.js:

主要.js：

import 'global-components'

I believe this is the cleanest solution.

我相信这是最干净的解决方案。

回答by Matthew Darton

You dont have to repeat the component name, if it is the same name as the import. So this is enough:

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

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

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

回答by Redet Getachew

You can recursivly go through your files and import them by their component name or file name.

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

 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);
 })