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.') 
     } 
    } 
    } 
}) 

---

参照用の古い返信：

のみ2ワットがあります。 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 
}