vue grid-layout拖拉拽传参

可以通过在 `vue-grid-layout` 的 `item` 组件中绑定数据来实现拖拽传参。具体步骤如下：

1. 在 `vue-grid-layout` 的 `item` 组件中添加一个 `data` 属性，用于存储传递的参数。

2. 在 `vue-grid-layout` 的 `item` 组件中添加一个 `draggable` 属性，将其设置为 `true`，表示该组件可以被拖拽。

3. 在 `vue-grid-layout` 的 `item` 组件中添加一个 `@dragstop` 事件，当拖拽结束时触发该事件。

4. 在 `@dragstop` 事件中，通过 `$emit` 方法触发一个自定义事件，并将 `data` 属性作为参数传递给该事件。

5. 在父组件中监听该自定义事件，并在事件处理函数中获取传递的参数。

下面是一个示例代码：

<template>
  <vue-grid-layout :layout="layout" :col-num="12" :row-height="30">
    <div v-for="item in items" :key="item.i" :data="item.data" :draggable="true" @dragstop="onDragStop(item)">
      {{ item.text }}
    </div>
  </vue-grid-layout>
</template>

<script>
export default {
  data() {
    return {
      layout: [
        { i: 'a', x: 0, y: 0, w: 6, h: 2 },
        { i: 'b', x: 6, y: 0, w: 6, h: 2 },
        { i: 'c', x: 0, y: 2, w: 12, h: 2 },
      ],
      items: [
        { i: 'a', text: 'Item A', data: { id: 1, name: 'Item A' } },
        { i: 'b', text: 'Item B', data: { id: 2, name: 'Item B' } },
        { i: 'c', text: 'Item C', data: { id: 3, name: 'Item C' } },
      ],
    };
  },
  methods: {
    onDragStop(item) {
      this.$emit('item-dragged', item.data);
    },
  },
};
</script>

在父组件中监听 `item-dragged` 事件，并在事件处理函数中获取传递的参数：

<template>
  <div>
    <p>拖拽传递的参数：{{ draggedItem }}</p>
    <my-component @item-dragged="onItemDragged"></my-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      draggedItem: null,
    };
  },
  methods: {
    onItemDragged(data) {
      this.draggedItem = data;
    },
  },
};
</script>