web-dev-qa-db-ja.com

vueコンポーネントをグローバルに登録する

vue vue-cliを使用して作成したアプリがあります

いくつかのコンポーネントを作成していますが、次のように使用したいと思います。

<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 を使用しましたが、使用するために各コンポーネントをインポートする必要はありません。

誰かが私を正しい方向に向けることができますか？ありがとう。

javascriptvuejs2vue-component
13
Brad

@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>
7
Ayush Gupta

これは簡単に達成できます。 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

23
Odyssee