Question

我需要根据用户交互动态地将子组件添加到组件中。我看了一些old issue，但对我来说这似乎是一个肮脏的黑客，此外，这是一个老问题，vue开发真的很活跃，所以我不知道现在是否有更好的方法。

我到目前为止所尝试的内容是this fiddle ，但显然无效，它说$mount只能调用一次。我不知道该怎么做，我的另一个选择是动态组件，但为此我还必须动态添加一个<component>元素，以便它变成几乎相同的问题。

那么如何在客户端点击或其他客户端事件上添加组件？

Answer 1

您希望从一开始就将自定义组件放在那里，并使用v-if或v-for来显示，隐藏，添加或减去这些组件。您让数据驱动DOM，而不是自己管理DOM。小提琴示例：https://jsfiddle.net/f5n5z5oo/2/

您甚至可以使组件动态更改使用is的组件类型：

data: {
  elements: [
    { type: 'component-a' },
    { type: 'component-b' }
  ]
}
<div v-for="element in elements" :is="element.type"></div>

如果您对您的用例更具体，我会尝试进一步提供帮助！

Answer 2

希望这有助于将来：有很多方法可以做到这一点，下面是一种方法：

1。如果已经定义了组件，只需使用parent关键字重新添加组件的新实例，以定义组件实例的父级，如下所示：check codepen

var Child = Vue.extend({
    template: '<div>Hello!</div>',
});

new Vue({
  el: '#demo',
  ready: function() {
    var child = new Child({
        el: this.$el.querySelector('.child-host'),
        parent: this,
    });
  },
});

如何在Vue.js中添加动态组件/部分

2 个答案: