--- highlight: nord theme: vuepress --- ## 产品需求开完产品需求会议，遇到了一个需求，首先页面分成两栏布局，左侧展示数据组件，支持拖拽排序，点击按钮清除组件。右侧支持将组件的缩略图拖拽至左侧生成一个新的组件。 ## 思路对于动态生成组件来说每一次都要是生成全新的一个组件，那么就可以把 **组件放进函数当中 return**。在JSX中调用函数，每次调用函数都会返回一个全新的组件。**这对React来说非常简单**，但是对于Vue来说，直接将组件返回是不可能的。尽管这个 **return** 写法不适合Vue，但是我们不可否认，思路是非常正确的，所以我们应该考虑一个别的写法。至于动态的生成组件，我们必须以数据来驱动组件的生成。对于拖拽组件的排序，直接使用拖拽库就OK了！！ ## 面临的问题 1. 拖拽库的选择 2. 如何生成组件 3. 以数据驱动动态生成组件 ## 拖拽库的选择拖拽库在这里我选择的是项目中存在的一个拖拽库 [Vue.Draggable 点这里链接查看](https://github.com/SortableJS/Vue.Draggable) Start 14.9K 蛮不错的。如果你们的Vue项目中没有用到这个拖拽库，你们可以自行参考本片文章的设计思路。 ## 如何生成组件在这里我使用的是 Vue.extend() 不清楚如何使用的小伙伴请在官方文档中查看过后再来学习这篇文章 [Vue.extend](https://cn.vuejs.org/v2/api/#Vue-extend) 。接下来我们创建一个js文件，用来书写创建组件的代码。 ### 生成组件 ``` /* generateComponents.js 文件名 */ import Vue from "vue"; // 想要动态生成的组件，先引入这个文件。 import components1 from "./components/TestCom1.vue"; import components2 from "./components/TestCom2.vue"; // 将组件的名称和组件做一个对应Map const comMap = { components1, components2, }; // 接收生成组件需要的组件名称，和想要传递给组件的 // props, 和事件 const ReturnNewCom = function ({ props, on }) { const { comItem: { name }, } = props; const newComponent = Vue.extend({ render(createElement) { // 使用传进来的组件name来决定渲染哪一个组件。 return createElement(comMap[name], { props, on, }); }, }); return new newComponent(); }; export default ReturnNewCom; ``` ### 组件在这里我们书写两个组件，用来演示这个Demo，分别为components1.vue,components2.vue。 ``` /*components1.vue*/ ``` 其实components2.vue文件中的代码和components1.vue文件的代码类似，唯一不同的地方就是背景颜色不一样。 ## 以数据驱动动态组件的生成接下来就得使用Vue.Draggable 这个拖拽库进行拖拽和数据的修改。我们可以直接在App.vue文件中直接书写。 ``` /* App.vue */ ``` 这样就实现了动态的组件渲染和拖拽排序。 ## 效果 ![屏幕录制2021-05-04 17.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fa4311ac26b3414a8db77f6125770cf9~tplv-k3u1fbpfcp-watermark.image) ## 源码想要尝试的同学可以自行下载本文的代码[源码github](https://github.com/liu-jin-yi/drag_generate_components) ## 往期精彩文章 [webpack打包优化方向指南(理论篇) ](https://juejin.cn/post/6960490563455942692)

查询条件：{{ queryObj }}

{{ leftComList }}