상위 항목에서 가져온 사용

상위 항목에서 가져온 사용

나는 다른 부품을 관리하는 부품을 만들고 있어.에 따라 특정 위치에 구성요소를 동적으로 렌더링함props그리고inputs오케스트라 같은.

유스케이스

내 Orchestrator에는 격자(p1 ... p6)와 같은 자리 표시자가 있다.

|-p1-|-p2-|-p3-|
|-p4-|-p5-|-p6-|

주어진 순간에 구성 요소를 렌더링하며C1로p2그리고C2로p6:

|-p1-|-C1-|-p3-|
|-p4-|-p5-|-C2-|

또 다른 순간에는, 그것은C1에 의해C3:

|-p1-|-C3-|-p3-|
|-p4-|-p5-|-C2-|

문제

이런 역동성을 감안하면 (내가 아는 한) 쓸 수가 없다.slots. 그래서 나는 사용하고 있다.component에 꼬리표를 달다.:is올바른 구성 요소를 동적으로 렌더링하기 위한 받침문제는 이 문제를 위해:is일을 하려면, 나는 나의 Orchestrator/manager 컴포넌트에 그 컴포넌트를 정의해야 한다.그리고 재사용을 위해 분리해서 보관하고 싶은데, 그 부품들을 수입하는 건 말이 안 돼.한 가지 해결책은 구성 요소를 글로벌하게 등록하는 것이다.가능하다면 나는 그것을 피하고 싶다.방법이 있을까?나는 어떤 종류의 반성의 마법에도 열려 있다-당신이 생각할지도 모르는 n_n''

다음과 같은 받침대를 통해 구성 요소를 전달하면 된다.

Orchestrator.부에를 하다

<component :is="comp"/>

export default {
  props: ['comp']
}

시험.vue

<orchestrator :comp="MyComponent"/>

import Orchestrator from './orchestrator.vue'
import MyComponent from './my-component.vue'

export default {
  components: {
    Orchestrator,
  },

  data() {
    return {
      MyComponent,
    };
  },
}

동적으로 로드된 비동기 구성요소를 사용할 수 있어야 한다.

예를 들어...

<component :is="p2Replacement"></component>

data () {
  return {
    p2Replacement: null
  }
},
methods: {
  setP2Replacement(component) {
    this.p2Replacement = () => import(`path/to/${component}.vue`)
  }
}

그리고 이렇게 부른다.setP2Replacement('C1')또는setP2Replacement('C3').

다음에서 고정된 부분import웹팩이 글로브 패턴을 사용하여 적절한 파일을 포함할 수 있도록 표현식이 필요하다.https://webpack.js.org/guides/dependency-management/#the-properties를 참조하십시오.

참조URL: https://stackoverflow.com/questions/54993057/use-component-that-was-imported-in-the-parent