Vue.js 动态注入组件标记

我有多个drop div，所以每次我把一个组件的映像放到这些div中，我都会导入与这个映像对应的组件，我需要把它放到目标div中的dom中

drops[i].addEventListener('drop', function () {
    if (this.draggedElement === null) {
        return false
    }

    // get the component conf of this image
    let conf = BlocksStore.conf[this.draggedElement.dataset.category].blocks[this.draggedElement.dataset.type]

    // get the component itself (./blocks/SimpleTitle.vue)
    let component = require('./blocks/' + conf.component)

    drops[i].classList.remove('drag-enter')

    // here is where i don't know what to do ...
    drops[i].innerHTML = component
    this.draggedElement = null
}.bind(this))

这里是./blocks/SimpleTitle.vue的代码

<template>
  <tr>
    <td align="center">
      <a href="#" title="Lorem Ipsum" style="text-decoration: none; font-size: 20px; line-height: 20px !important; color: #010101;">Lorem Ipsum</a>
    </td>
  </tr>
</template>

<script>
export default {
  name: 'simple-title'
}
</script>

<style>

</style>

导出默认值{
名称：“简单标题”
}

---

我已经尝试附加标记而不是组件，但是dom不理解它为组件

您的

“/blocks/”+conf.component

文件导出什么？共享其代码肯定会有所帮助。请看一个拖放图像的示例，也许它有助于解决您的问题，谢谢@ricardoorellana，但问题不在于图像，而在于组件。图像只是组件的占位符，直到用户删除它。这是一项工作。我不能使用动态组件，因为我不知道组件将在哪里，因为我允许用户将组件拖放到他想要的任何地方