如何动态嵌套 vue 组件？答案

【问题标题】：How can I dynamically nest vue components?如何动态嵌套 vue 组件？
【发布时间】：2018-07-31 21:08:45
【问题描述】：

当用户单击按钮时，我想在另一个组件中添加一个组件。但是我们如何在虚拟 dom 中渲染组件。我尝试使用 v-html 但它不起作用。解决此问题的最佳方法是什么？

export default {
    data(){
        return{
            elements : {
                hotel : '<hotel-form></hotel-form>'
            },
            

        }
    },
  methods:{
      addHotel(){
          
          console.log('add');
      }
  }
}

<template>
  <div class="container" style="margin-top:300px;">
      <div class="row" id="mainform">
          <div v-for="item in elements">
              <div v-html="item"></div>
          </div>

      </div>
      <button @click="addHotel()">add hotel</button>
  </div>
</template>

【问题讨论】：

这是关于酒店列表还是可以包含其他组件类型的元素列表？
它不是酒店列表，但 hotel-form 组件包含一个用于添加新酒店的表单。
所以您的列表中有多个酒店表格？或者为什么不在按下按钮时切换表单的可见性？
这是一个很好的方法，但我也有多种表格用于酒店、航班和航班暂停等。所以这就是我想动态做的原因。是否有可能用 vue 实现这种行为
好的，我明白了。您没有任何数据需要传递给您的表单吗？

标签： laravel-5 vuejs2 vue-component

【解决方案1】：

我会通过v-for 将数组 (hotels) 绑定到<hotel-form> 组件标签。这样，最初不会渲染hotel-form 组件，然后您可以将一个对象（任何要绑定到hotel-form 组件的数据）推送到hotels 数组，DOM 将自动渲染一个新的对应@ 987654327@组件。

这是一个简单的例子：

Vue.component('hotel-form', {
  template: '#hotel-form',
  props: { id: Number, name: String },
});

new Vue({
  el: '#app',
  data() {
    return { hotels: [], count: 0 }
  },
  methods: {
    addHotel() {
      this.hotels.push({ name: 'foo', id: this.count++ })
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>

<div id="app">
  <div id="mainform">
    <hotel-form v-for="hotel in hotels" :key="hotel.id" v-bind="hotel">
    </hotel-form>
  </div>
  <button @click="addHotel">add hotel</button>
</div>

<template id="hotel-form">
  <div>
    <h4>Hotel Form #{{ id }}</h4>
    <div>{{ name }}</div>
  </div>
</template>

【讨论】：