Vue.js에서 인스턴스 당 하위 구성 요소를 확인할 수 있습니까?

Question

하위 구성 요소를 동적으로 전달할 수 있기를 원합니다. 하위 구성 요소는 상위 구성 요소의 인스턴스마다 다를 수 있습니다. 전역 구성 요소를 등록하지 않고도이를 달성 할 수있는 방법이 있습니까? 선명도

// Component A 
export default { 
    template: ` 
     <div> 
      <div>Some stuff...</div> 
      <component-b :passed-component="passedComponent"></component-b> 
     </div> 
    `, 
    data() { 
     return { 
      passedComponent: { /* ... */ }, 
     }; 
    }, 
    // Note: passedComponent doesn't necessarily come from `data` 
}; 

// Component B 
export default { 
    template: ` 
     <div> 
      <div>Some more stuff...</div> 
      <component-c :passed-component="passedComponent"></component-c> 
     </div> 
    `, 
    props: ['passedComponent'], 
}; 

// Component C 
export default { 
    template: ` 
     <div> 
      <div is="passedComponent"></div> 
     </div> 
    `, 
    props: ['passedComponent'], 
    components: { 
     // How can I register `passedComponent` here? 
     // (it can differ per instance of `component-c`) 
    }, 
}; 

편집 :

는 여기에 내가 달성하기 위해 노력하고있어의 빠른 예제 이름 대신 실제 구성 요소 객체를 전달하면 바람직 할 것이다.

Answer 1

편집 : 당신은 당신이 acutally 나는 유스 케이스 생각할 수 있지만, 소품으로 구성 요소 정의를 물려 싶어했다 후

, 나는이 일을 할 수 weither에서 찾을 흥미 있었다.

async component 기능을 사용하여 수행 할 수 있습니다.

JSFiddle과 함께 재생

: https://jsfiddle.net/rvsbccan/4/

HTML :

<div id="app"> 
    <test :passed-comp="compDefToPass"></test> 
</div> 
<template id="test"> 
    <passed-comp></passed-comp> 
</template> 

JS : 참조

Vue.component('test', { 
    template: '#test', 
    props: ['passedComp'], 
    components: { 
    'passed-comp': function(resolve) { 
     resolve(this.passedComp) 
    } 
    }, 
}) 

var vm = new Vue({ 
    el: '#app', 
    data: { 
    'compDefToPass': { 
     template: '<div>When you see this, we successfully passed down a component definition as a prop!</div>', 
     ready: function() { 
     console.log('Hello from a prop-passed component.') 
     } 
    } 
    } 
}) 

---

올드 응답 :

만 이w 있습니다 AYS 당신은 이미 알고있는 것 같다 :

• 그들에게 전 세계적으로
• 가져 오기를 등록하고 등록 두 번째 가능성이 있기 때문에의 발굴 보인다면 로컬 구성 요소 C

에서 수의 모든 구성 요소 많은 수입품을 다른 모듈로 추출 할 수 있습니다.

// componentBundle.js 
import X from './components/X.vue' 
import Y from './components/Y.vue' 
// .... and so on... 
export default { 
    X, Y, .... 
} 

// component-c.vue 
import componentBundle from '../component-bundle' 
export default { 
    components: componentBundle 
}