如何在 Vue.js 中添加动态 components/partials

Question

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

到目前为止，我在 this fiddle 上尝试过，但显然不起作用，它说 $mount 只能调用一次。我不知道该怎么做，我的另一个选择是动态组件，但为此我还必须动态添加一个 <component> 元素，这样它就变成了几乎相同的问题。

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

Answer 1

您想从一开始就将自定义组件放在那里，然后使用 v-if 或 v-for 来显示、隐藏、添加或减去这些组件。您让数据驱动 DOM，而不是您自己管理 DOM。 Fiddle 示例：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 关键字来定义组件实例的父实例，如下所示：检查 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 中添加动态 components/partials

How to add dynamic components/partials in Vue.js

javascript

vue.js