Question

我正在尝试在定义的组件中创建动态组件，如下所示：

主要组件（应该在调用时动态创建组件.then()）

extform-input

我收到错误... components: { 'extform-input' : ExtformInput }, methods : { changeType: function () { var self = this var TheComponent = this.$options.components['extform-input']; self.$addChild(TheComponent); } ...

Answer 1

如果组件已经安装，即使用Vue(tag,constructor)全局定义为组件，那么只需使用parent关键字重新添加组件的新实例来定义组件实例的父组件，就可以完成以下操作： / p>

注意：截至vue js V-1.0.12，$addChild方法已被删除

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
        });
    }
}

请参阅codepen demo http://codepen.io/obonyojimmy/pen/ONwKZX

Answer 2

可能是您this的范围可能与您的想法不同。只需console.log(this)并找出this or self的范围，或者您可以分享整个代码吗？

Answer 3

您无法在Vue js中动态实例化组件。这是关于主题的discussion，以及类似的question（我做了那个问题）。但是，即使您无法动态添加组件，也可以以不同的方式执行您想要执行的操作。不必添加子项，您必须显示它将其添加到DOM中，如果要添加单个组件使用v-if（notiche，您没有隐藏/显示元素，您正在添加/删除DOM）。如果要动态添加可变数量的组件，请使用v-for。有关v-for方式

的引用问题的详细信息

vue js动态创建组件

3 个答案: