如何动态嵌套 vue 组件？

Posted 2023-02-23

【中文标题】如何动态嵌套 vue 组件？

【英文标题】：How can I dynamically nest vue components?

【发布时间】：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 实现这种行为

好的，我明白了。您没有任何数据需要传递给您的表单吗？

【参考方案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>