javascript - vue js动态创建组件

Question

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

主要组件(调用时应动态创建组件extform-input)

...
components: {
       'extform-input' : ExtformInput

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

...

我得到错误 self.$addChild is not a function

Answer 1

如果组件已经安装，即使用 Vue(tag,constructor) 定义为全局组件，那么只需使用 parent 关键字来定义父组件，重要的是添加一个新的组件实例组件实例的作用如下:

注意:从 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 演示 http://codepen.io/obonyojimmy/pen/ONwKZX