vue拖放组件dnd-grid，容器与box间数据传递和渲染的代码逻辑

1. 容器内所有box的位置信息数据集在页面中使用在两个地方，第一个地方以属性方式+同步修改修饰符.sync,传递给容器，容器用这个数据集生成一个layoutMap结构（键值结构）。第二个用于页面循环生成box组件
2. 
3. 容器监听每个box发出的相关事件（拖动开始，拖动中，拖动停止）（事件由box组件发出），并动态维护layoutMap结构
4. 容器的getPixelPostionByBoxId根据layoutMpa结构实时返回box的实时layout数据
5. Box组件调用容器的getPixelPositionById,得到boxId对应的水平偏移量,用于渲染
6. 
7. Box组件监听（拖动开始，拖动中，拖动停止），并将发出（emit）对应事件，由容器监听
8. Box发出事件，容器进行监听，容器修改layoutMap结构，Box调用容器的方法得到最新的layout数据用于渲染。Box组件和容器的关联就是boxId

vue拖放组件dnd-grid，容器与box间数据传递和渲染的代码逻辑

原文：https://www.cnblogs.com/yanyan-yangyang/p/13938572.html