Vue.js 相当于 appendChild 动态添加新元素/组件？答案

【问题标题】：Vue.js equivalent of appendChild to dynamically add new element/component?Vue.js 相当于 appendChild 动态添加新元素/组件？
【发布时间】：2020-04-29 06:38:18
【问题描述】：

在 Vue.js 中，我有一个 var app = new Vue({...}); 和一个组件 Vue.component('mycomponent', ...，我可以通过在 html 中直接添加 <mycomponent></mycomponent> 来毫无问题地使用此类组件。我希望做的是在单击按钮后或发生其他此类事件时按需动态添加这些组件。在原始 JS 中，我会在事件触发时使用 document.createElement...，然后使用 el.appendChild.. 将其添加到 html 中。我如何对 Vue.js 做同样的事情？

我没有对节点 js 做任何花哨的事情。这是在<head> 中带有<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 的单个html 页面上。

【问题讨论】：

标签： javascript vue.js vuejs2

【解决方案1】：

要做到这一点，“Vue 方式”通常涉及使用 v-if、v-for 或 <component>，具体取决于您要执行的操作：

使用v-if 根据条件有条件地显示组件/元素。
使用v-for 呈现组件/元素列表。
使用<component> 呈现动态组件/元素。

因此，要实现您在问题中描述的内容，您可以像这样声明一个布尔数据属性visible：

data() {
  return {
    visible: false
  }
}

并将其与v-if 一起使用来控制模板中组件的可见性：

<mycomponent v-if="visible"></mycomponent>

这要求<mycomponent> 预先存在于模板中。如果您不知道要显示哪种组件，则可以在模板中包含每种可能性并根据某些条件显示您想要的：

<comp1 v-if="comp1Visible"></comp1>
<comp2 v-if="comp2Visible"></comp2>
<comp3 v-if="comp3Visible"></comp3>

或者您可以将<component> 与另一个数据属性 (comp) 一起使用，您可以将其设置为要显示的组件的名称：

<component v-if="visible" :is="comp"></component>

您所描述的内容（document.createElement 后跟 el.appendChild）在 Vue 中不存在。 Vue 有一个严格的渲染机制，你需要使用它；动态实例化组件并将它们随机插入 DOM 是不可能的。 技术上您可以将 comp = new Vue() 等同于 document.createElement 然后 el.appendChild(comp.$el)，但这可能不是您想要做的，因为您将创建一个独立的 Vue 实例必须手动管理，没有简单的方法来传递数据。

【讨论】：