vue 구성 요소를 글로벌하게 등록하는 중

vue 구성 요소를 글로벌하게 등록하는 중

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>

재사용 가능한 컴포넌트는 글로벌하게 등록하여 사용할 때마다 Import할 필요가 없거나 사용할 때 동적으로 로드하는 방법이 있으면 좋겠습니다.이게 가능합니까?

이전에 Vuetify를 사용한 적이 있기 때문에 각 컴포넌트를 수입할 필요가 없습니다.

누가 저를 올바른 방향으로 안내해주실 수 있나요?감사합니다.

이것은 달성하기 쉽다.main.js 파일에 컴포넌트를 글로벌하게 등록할 수 있습니다.

import MyComponent from '@/components/MyComponent'

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

이제 사용할 수 있습니다.<my-component-name />온통.

더 깔끔하게, 더 깔끔하게main.js는 컴포넌트 폴더에 있는 index.displays 파일에 컴포넌트를 Import합니다.

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

@Odysee의 답변 외에 글로벌을 피하고 싶다면 파일을 작성하는 것도 있습니다.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>

가장 깨끗한 접근법이라고 생각되는 여러 솔루션의 조합:

global-components.syslog:

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.filename:

import 'global-components'

더 간단한 방법은 다음과 같이 글로벌 컴포넌트를 Import할 수 있습니다.

고객님의 고객명main.js. (주)Vue.component()전에 호출해야 합니다.new Vue())

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

TypeScript 를 사용하고 싶은 유저가 있는 경우는, 그것을 TypeScript 와 접속하는 것으로 실시할 수 있습니다.createApp()로서 방법하다.

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

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

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

컴포넌트명이 Import와 같은 경우에는 반복할 필요가 없습니다.이것으로 충분합니다.

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

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

파일을 반복적으로 살펴보고 구성 요소 이름 또는 파일 이름으로 가져올 수 있습니다.

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

언급URL : https://stackoverflow.com/questions/52644198/registering-vue-components-globally