Fügen Sie beliebige Vue.js-Komponenten zur übergeordneten Komponente hinzu

Question

Ich benutze Vue.js, um ui für mein HTML5-Spiel zu bauen. Ich habe einen Fall, in dem ich ui-Container definieren möchte, die im Wesentlichen nur andere ui-Komponenten gruppieren und sie irgendwo auf dem Bildschirm positionieren. So konnte ich etwas davon los:

<ui-container> 
    <ui-component1></ui-component1> 
    <ui-component2></ui-component2> 
    <ui-component3></ui-component3> 
</ui-container> 

Wo ich hinzufügen müssen, und entfernen Sie diese Komponenten dynamisch basierend auf Daten-Modell, das den Inhalt des Behälters darstellt. Das Problem ist, dass ich ui-container generisch behalten möchte, damit ich jede Vue-Komponente anhängen kann, ohne Informationen in der Vorlage darüber zu haben, welche Komponenten es möglicherweise gibt.

ich gegoogelt und fand dieses Beispiel, die dynamisch Komponenten Injektion betrifft: http://forum.vuejs.org/topic/349/injecting-components-to-the-dom Während die datengetriebene Version in Beispiel zu machen und leicht zu verstehen war, verwendet er v-für für Tag und erfordert daher eine vor der Hand zu wissen, die Art von Kind-Komponente.

Also Frage ist, wie kann ich dieses Beispiel verallgemeinern, um mit jeder Komponente dynamisch zu arbeiten? Sollte mein Datenmodell den Typ des Komponenten- oder Tag-Namens haben und es dann in v-for interpolieren? Oder gibt es einen Mechanismus für diese Art von Anforderung?

Answer 1

Sie können das Attribut is verwenden, um den Typ einer Komponente dynamisch festzulegen. Hier sind die docs. Der Code sieht etwas wie:

<div id="app"> 
    <div v-for="component in components" :is="component.type" :value="component.value"></div> 
</div> 

Geige Arbeiten mit spielen: Dynamic Vue.js components