全局注册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://vuejs.org/v2/guide/components-registration.html

Answer 2

作为@ 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
}

你可以按如下方式使用它:

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

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

Answer 3

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

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

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

Answer 4

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

global-components.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 5

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

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