Vue js 동적으로 구성 요소 가져오기

Vue js 동적으로 구성 요소 가져오기

동적 자식 구성 요소 목록을 제공해야 하는 다음과 같은 부모 구성 요소가 있다.

<template>
  <div>
    <div v-for="(componentName, index) in supportedComponents" :key="index">
      <component v-bind:is="componentName"></component>
    </div>
   </div>
 </template>

<script>
const Component1 = () => import("/components/Component1.vue");
const Component2 = () => import("/components/Component2.vue");
export default {
  name: "parentComponent",
  components: {
    Component1,
    Component2
  },
  props: {
    supportedComponents: {
      type: Array,
      required: true
    }
  }
};
</script>

그supportedComponents속성은 상위 제안자에서 렌더링하려는 구성요소 이름 목록이다.

부모에 있는 자식 구성품을 사용하기 위해서 나는 자식 구성품을 수입하고 등록해야 한다.

그러나 이를 위한 유일한 방법은 구성 요소의 가져오기 경로를 하드 코딩하는 것이다.

const Component1 = () => import("/components/Component1.vue");
const Component2 = () => import("/components/Component2.vue");

그런 다음 다음과 같이 등록하십시오.

components: {
  Component1,
  Component2
}

나는 내 것을 간직하고 싶다.parentComponent가능한 한 일반적이다이것은 수입 명세서 및 등록 시 하드 코딩된 구성요소 경로를 피할 수 있는 방법을 찾아야 한다는 것을 의미한다.나는 에 주입하고 싶다.parentComponent가져와 렌더링해야 하는 하위 구성 요소

부에에서 이것이 가능한가?만약 그렇다면, 어떻게?

생성된 수명 주기 내에 구성 요소를 로드하고 어레이 속성에 따라 다음과 같이 등록하십시오.

<template>
    <div>
        <div v-for="(componentName, index) in supportedComponents" :key="index">
            <component :is="componentName"></component>
        </div>
    </div>
</template>

<script>
    export default {
        name: "parentComponent",
        components: {},
        props: {
            supportedComponents: {
                type: Array,
                required: true
            }
        },
        created ()  {
            for(let c=0; c<this.supportedComponents.length; c++) {
                let componentName = this.supportedComponents[c];
                this.$options.components[componentName] = () => import('./' + componentName + '.vue');
            }
        }
    };
</script>

꽤 잘 된다.

작업 코드, 동적 가져오기 내에 문자열이 있는지 확인하십시오. 그렇지 않으면 "모듈을 찾을 수 없음"이 표시됨

       <component :is="current" />
    export default {  data () {
    return {
      componentToDisplay: null
    }
  },
  computed: {
    current () {
      if (this.componentToDisplay) {
        return () => import('@/components/notices/' + this.componentToDisplay)
      }
      return () => import('@/components/notices/LoadingNotice.vue')
    }
  },
  mounted () {
    this.componentToDisplay = 'Notice' + this.$route.query.id + '.vue'
  }
}

런타임에 동적 웹 팩 가져오기() 해결

동적으로 경로를 설정할 수import()구성 요소 상태에 따라 다른 구성 요소를 로드하는 기능.

<template>
  <component :is="myComponent" />
</template>

<script>
export default {
  props: {
    component: String,
  },

  data() {
    return {
      myComponent: '',
    };
  },

  computed: {
    loader() {
      return () => import(`../components/${this.component}`);
    },
  },

  created() {
    this.loader().then(res => {
      // components can be defined as a function that returns a promise;
      this.myComponent = () => this.loader();
    },
  },
}
</script>

참고: JavaScript는 실행 직전에 브라우저에 의해 컴파일된다.이는 웹팩 수입이 어떻게 해결되는지와는 무관하다.

나는 코드를 가질 수 있는 플러그인이 필요하다고 생각하는데, 매번 자동으로 로딩되어야 한다.이 해결책은 나에게 효과가 있다.

import { App, defineAsyncComponent } from 'vue'
const componentList = ['Button', 'Card']
export const registerComponents = async (app: App): void => {
  // import.meta.globEager('../components/Base/*.vue')
  componentList.forEach(async (component) => {
    const asyncComponent = defineAsyncComponent(
      () => import(`../components/Base/${component}.vue`)
    )
    app.component(component, asyncComponent)
  })
}

당신은 또한 꽤 잘 작동하는 글로브도 시도할 수 있지만, 나는 이 해결책을 위해 그것을 확인했지만 읽을 가치가 있는 것을 확인해봐라.

동적 가져오기

[업데이트]

import.meta.globEage도 해봤는데, 조금 느리게 실리는 것 같지만 별로 눈에 띄지 않는 게 문제야.

import { App, defineAsyncComponent } from 'vue'
export const registerComponents = async (app: App): void => {
Object.keys(import.meta.globEager('../components/Base/*.vue')).forEach(
    async (component) => {
    const asyncComponent = defineAsyncComponent(
        () => import(/* @vite-ignore */ component)
    )
    app.component(
        (component && component.split('/').pop()?.split('.')[0]) || '',asyncComponent
    )
    })
}

참조URL: https://stackoverflow.com/questions/58080549/vue-js-import-components-dynamically