Vue js crée dynamiquement des composants

Si le composant est déjà monté, c'est-à-dire défini comme un composant globalement à l'aide de Vue(tag,constructor) il suffit d'ajouter une nouvelle instance de composant important à l'aide du mot-clé parent pour définir l'instance parent de composant.

NB: à partir de vue js V-1.0.12, la $addChild été supprimée

 components: { 'extform-input' : ExtformInput }, methods : { changeType: function() { var self = this var Child = this.$options.components['extform-input']; var child = new Child({ el: this.$el.querySelector('.child-host'), \\ define the el of component parent: this, \\ define parent of component }); } } 

Voir la démo codepen http://codepen.io/obonyojimmy/pen/ONwKZX

Il se peut que votre portée soit différente de ce que vous pensez. Il suffit de console.log(this) et de découvrir la portée de this or self ou pouvez-vous partager l'intégralité du code?

Vous ne pouvez pas instancier dynamiquement les composants dans Vue js. Voici une discussion sur le sujet, et une question similaire (j'ai fait cette question). Mais, même si vous ne pouvez pas ajouter de composants dynamiquement, vous pouvez faire ce que vous voulez faire, autrement. Au lieu d'ajouter l'enfant, il faut le montrer en l'ajoutant au DOM, si vous souhaitez ajouter un seul composant, utilisez v-if (par exemple, vous n'êtes pas écrasant / affiché un élément, vous ajoutez / supprimez du DOM) . Et si vous souhaitez ajouter un nombre variable de composants à la volée, utilisez v-for . Les détails sont sur la question référencée pour le v-for way