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

一种更清洁的方法是，将组件导入这样的组件文件夹中的index.js文件中，而不会膨胀您的main.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

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

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

main.js：

import 'global-components'

Answer 4

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

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

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

Answer 5

如果组件名称与导入的名称相同，则无需重复。这样就足够了：

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 6

您可以递归浏览文件，然后按其组件名称或文件名导入它们。

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

Answer 7

如果有人希望使用TypeScript做到这一点，可以通过使用ItemMargin="{x:Bind ViewModel.ItemsMargin,Mode=OneWay}"方法将其链接为

createApp()

全局注册vue组件

7 个答案: