Vue2如何动态新增自定义组件，点击body的某个地方就新增一个组件？

Question

一个简单的自定义组件如下：

<template>
   <div>
       Test
   </div>
</template>
<script>

export default {
};
</script>
<style lang="scss" scoped>
   div{
       width:100px;
       background:red;
   }
</style>

比如我现在想点击页面的某个地方，就在这个鼠标点击的这个地方新增一个组件，怎么实现？

Answer 1

应该要结合vue的自定义指令和Vue.component方法