代码之家 › 专栏 › 技术社区 › Brad

全局注册vue组件

vue-component vuejs2 javascript

Brad · 技术社区 · 7 年前

我有一个使用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 在过去,这并不要求您为了使用它而导入每个组件。

2 回复 | 直到 7 年前

Redet Getachew amit semwal 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);
 })

Odyssee 7 年前

这很容易做到。您可以在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)

主要.js 加载注册的组件。

import '@/components'

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

Ayush Gupta 5 年前

除了@Odyssee的答案之外,如果你想避免globals,另一个选择是创建一个文件,比如 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>

Sean Dvir 5 年前

A 结合我认为这是最干净的方法:

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'

Alvin Konda 6 年前

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

在你的 main.js Vue.component() 必须在 new Vue() )

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

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

Saksham 5 年前

如果有人希望使用TypeScript这样做,可以用 createApp() 方法as

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

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

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