Vue 动态显示组件 component :is

最终实现结果，如下图：

点击不同的组件名称，界面显示相应的组件。

实现过程

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>