调整触发点击事件的元素

src/components/DynamicComponent.vue

@@ -1,15 +1,14 @@
 <template>
-  <div :id="componentId" @click="handleClick">
+  <component @click.stop="handleClick" :id="componentId" :is="componentType" v-bind="componentProps"
-    <component :is="componentType" v-bind="componentProps" :class="componentClass" :style="componentStyle">
+    :class="componentClass" :style="componentStyle">
-      {{ componentText }}
+    {{ componentText }}
-      <template v-for="child in componentChildren" :key="child.id">
+    <template v-for="child in componentChildren" :key="child.id">
-        <DynamicComponent :component-data="child" />
+      <DynamicComponent :component-data="child" />
-      </template>
+    </template>
-      <template v-for="(slot, key, index) in componentSlots" :key="index" v-slot:[key]>
+    <template v-for="(slot, key, index) in componentSlots" :key="index" v-slot:[key]>
-        <DynamicComponent :component-data="slot" />
+      <DynamicComponent :component-data="slot" />
-      </template>
+    </template>
-    </component>
+  </component>
-  </div>
 </template>
 <script setup lang="ts">
 import { defineProps, computed, onMounted } from 'vue';

src/components/MainView.vue

@@ -69,7 +69,7 @@ useDraggable(el2, componentsList, {
   },
   clone(element) {
     return {
-      id: uuid(),
+      id: `${element.type}-${uuid()}`,
       name: element.name,
       type: element.type,
       props: element.props,