vue3怎么从树中拖拽数据并生成新组件

在Vue 3中，可以使用Vue DND库来实现从树中拖拽数据并生成新组件的功能。下面是一个简单的示例：

首先，安装Vue DND库：

npm install vue-dnd --save

然后，在组件中引入并注册Vue DND插件：

import VueDND from 'vue-dnd'

export default {
  name: 'MyComponent',
  components: {},
  directives: {},
  mixins: [],
  data() {
    return {}
  },
  created() { },
  mounted() { },
  methods: {},
  computed: {},
  watch: {},
  plugins: [VueDND.plugin],
}

接下来，定义一个树形结构的数据源，例如：

const treeData = [
  {
    id: 1,
    name: 'Node 1',
    children: [
      {
        id: 2,
        name: 'Node 1-1',
        children: []
      },
      {
        id: 3,
        name: 'Node 1-2',
        children: []
      }
    ]
  },
  {
    id: 4,
    name: 'Node 2',
    children: []
  }
]

然后，在模板中渲染树形结构：

<template>
  <div>
    <ul>
      <li v-for="node in treeData" :key="node.id">
        <div v-dnd="node">{{ node.name }}</div>
        <ul v-if="node.children">
          <li v-for="child in node.children" :key="child.id">
            <div v-dnd="child">{{ child.name }}</div>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

在这个模板中，我们使用了v-dnd指令来标记每个节点，以便在拖拽时能够识别它们。然后，我们使用v-for指令来遍历树形数据并渲染节点。

最后，定义一个新组件的模板，例如：

<template>
  <div>{{ node.name }}</div>
</template>

当用户从树中拖拽一个节点并放置到新的位置时，可以使用Vue DND的onDrop回调来生成新组件。例如：

<template>
  <div>
    <ul>
      <li v-for="node in treeData" :key="node.id">
        <div v-dnd="node" :onDrop="onDrop">{{ node.name }}</div>
        <ul v-if="node.children">
          <li v-for="child in node.children" :key="child.id">
            <div v-dnd="child" :onDrop="onDrop">{{ child.name }}</div>
          </li>
        </ul>
      </li>
    </ul>
    <div v-if="newNode">New Component: <my-component :node="newNode" /></div>
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue'

export default {
  name: 'MyTree',
  components: { MyComponent },
  data() {
    return {
      treeData: [
        // ...
      ],
      newNode: null
    }
  },
  methods: {
    onDrop(event, node) {
      this.newNode = node
    }
  }
}
</script>

在这个示例中，我们定义了一个onDrop回调来处理拖拽事件。当用户从树中拖拽一个节点并放置到新的位置时，onDrop回调会被调用，并将拖拽的节点作为参数传递进来。在这个回调中，我们可以使用这个节点来生成新的组件，并将它保存在组件的状态中以便渲染。在模板中，我们使用v-if指令来判断是否有新组件需要渲染，并将节点作为prop传递给MyComponent组件。