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

Question

In Vue.js, I have a var app = new Vue({...});在 Vue.js 中，我有一个var app = new Vue({...}); and I have a component Vue.component('mycomponent', ... where I can use such component without any issue by directly adding <mycomponent></mycomponent> in html. What I wish to do is to dynamically add those component on demand maybe after a button click or when some other such event takes place. In raw JS, I'd use document.createElement... when event fires and then do el.appendChild.. to add it into html. How would I do the same with Vue.js ?我有一个组件Vue.component('mycomponent', ...我可以通过在 html 中直接添加<mycomponent></mycomponent>来毫无问题地使用这样的组件。我想要做的是动态添加这些组件需求可能在单击按钮后或发生其他此类事件时。在原始 JS 中，我会在事件触发时使用document.createElement... ，然后执行el.appendChild..将其添加到 html 中。我会怎么做与 Vue.js 一样吗？

I'm not doing anything fancy with node js.我没有对节点 js 做任何花哨的事情。 This is on a single html page with <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> in the <head> .这是在<head>中带有<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>的单个 html 页面上。

Answer 1

To do this the "Vue way" usually involves the use of v-if , v-for or <component> , depending on what you want to do:为此，“Vue 方式”通常涉及使用v-if 、 v-for或<component> ，具体取决于您要执行的操作：

Use v-if to conditionally show a component/element based on a condition.使用v-if根据条件有条件地显示组件/元素。
Use v-for to render a list of components/elements.使用v-for呈现组件/元素列表。
Use <component> to render a dynamic component/element.使用<component>呈现动态组件/元素。

So to achieve what you described in your question, you can declare a boolean data property visible like this:因此，为了实现您在问题中描述的内容，您可以声明一个visible的布尔数据属性，如下所示：

data() {
  return {
    visible: false
  }
}

and use it with v-if to control the visibility of a component in the template:并将其与v-if一起使用来控制模板中组件的可见性：

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

This requires that <mycomponent> exist in the template upfront.这要求<mycomponent>预先存在于模板中。 If you don't know what kind of component you want to show, then you can either include each possibility in the template and display the one you want based on some condition:如果您不知道要显示哪种组件，则可以在模板中包含每种可能性并根据某些条件显示您想要的：

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

or you can use <component> together with another data property ( comp ) which you can set to the name of the component you want to display:或者您可以将<component>与另一个数据属性 ( comp ) 一起使用，您可以将其设置为要显示的组件的名称：

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

What you described ( document.createElement followed by el.appendChild ) does not exist in Vue.您所描述的（ document.createElement后跟el.appendChild ）在 Vue 中不存在。 Vue has a strict rendering mechanism which you need to work with; Vue 有一个严格的渲染机制，你需要使用它； it isn't possible to dynamically instantiate components and stick them into the DOM randomly.动态实例化组件并将它们随机插入 DOM 是不可能的。 Technically you can do comp = new Vue() as an equivalent to document.createElement and then el.appendChild(comp.$el) , but that probably isn't what you want to do because you would be creating an independent Vue instance that you would have to manage manually with no easy way of passing data around.从技术上讲，您可以将comp = new Vue()等同于document.createElement然后el.appendChild(comp.$el) ，但这可能不是您想要做的，因为您将创建一个独立的 Vue 实例您将不得不手动管理，没有简单的方法来传递数据。

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

问题描述

1 个解决方案

解决方案1
4 已采纳 2020-01-12 09:42:33

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

问题描述

1 个解决方案

解决方案1 4 已采纳 2020-01-12 09:42:33

解决方案1
4 已采纳 2020-01-12 09:42:33