最终实现结果，如下图：
点击不同的组件名称，界面显示相应的组件。
实现过程
1、导入所需的组件
1、点击左侧按钮时，将对应组件的名字保存进数组中
<ul class="components-list"> // 点击时，将对应组件名保存进数组 <li @click="dragStart('oneDiv')" data-name="oneDiv"> <span>组件1</span> </li> <li @click="dragStart('twoDiv')" data-name="twoDiv"> <span>组件2</span> </li> <li @click="dragStart('threeDiv')" data-name="threeDiv"> <span>组件3</span> </li> <li class="list-group col-md-3"> <pre style="font-size:12px">{{listString}}</pre> </li> </ul>2、对应的点击函数
3、 componentData数组发生改变时，动态加载相应的数据，在标签<component>中，:is的值是对应的组件的名字
<component :is="item.name" :data-name="item.name"></component>