时间戳

首页 > 解决方案 > Vue.js 相当于 appendChild 动态添加新元素/组件？

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

问题描述

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

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

标签： javascriptvue.jsvuejs2

解决方案

要做到这一点，“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.createElementand el.appendChild(comp.$el)，但这可能不是您想要做的，因为您将创建一个独立的 Vue 实例，您必须手动管理它，而没有简单的方法来传递数据。

推荐阅读