vue中使用拖拽给组件传值

在 Vue 中，可以使用 `v-bind` 指令将拖拽事件的数据传递给子组件。具体实现步骤如下：

1. 在父组件中实现拖拽事件，并将拖拽事件的数据绑定到一个属性上：

<template>
  <div
    @dragstart="handleDragStart"
    draggable="true"
    :data="dragData"
  >
    拖拽元素
  </div>
  <ChildComponent :dropData="dropData"/>
</template>

<script>
export default {
  data() {
    return {
      dragData: { name: '拖拽数据' },
      dropData: null,
    };
  },
  methods: {
    handleDragStart(event) {
      event.dataTransfer.setData('text/plain', JSON.stringify(this.dragData));
    },
  },
};
</script>

2. 在子组件中实现放置事件，并使用 `v-bind` 指令将父组件传递过来的数据绑定到子组件的属性上：

<template>
  <div @drop="handleDrop" @dragover.prevent>
    放置区域
  </div>
</template>

<script>
export default {
  props: {
    dropData: null,
  },
  methods: {
    handleDrop(event) {
      this.dropData = JSON.parse(event.dataTransfer.getData('text/plain'));
    },
  },
};
</script>

这样，当拖拽元素被拖拽到放置区域时，子组件就可以获取到父组件传递过来的数据了。