Vue中用Composition API的defineComponent解决同名组件冲突问题

问题根源 #

你在main.js中同时全局注册了Vuetify全量组件（含其内置<draggable>）和VueDraggableNext，导致全局层面Vuetify组件优先级更高。而你尝试的<script setup>写法存在两处错误：

• 错误导入了Vue不存在的components导出项
• 误用defineComponent（<script setup>中无需通过它注册组件）

正确解决方案 #

方案1：导入时重命名组件（最简便） #

直接给VueDraggableNext重命名，避开标签名冲突，模板使用重命名后的标签：

<script setup>
import { reactive } from 'vue'
import { VueDraggableNext as Draggable } from 'vue-draggable-next'
</script>

<template>
  <Draggable v-model="yourList">
    <!-- 拖拽列表项 -->
  </Draggable>
</template>

方案2：局部注册为<draggable>标签 #

若坚持使用<draggable>作为标签名，在<script setup>中将VueDraggableNext赋值给同名变量即可（顶级变量会自动暴露给模板，覆盖全局注册的Vuetify组件）：

<script setup>
import { reactive } from 'vue'
import { VueDraggableNext } from 'vue-draggable-next'

// 局部注册，覆盖全局的Vuetify draggable组件
const draggable = VueDraggableNext
</script>

<template>
  <draggable v-model="yourList">
    <!-- 拖拽列表项 -->
  </draggable>
</template>

额外优化：从根源避免全局冲突 #

可修改main.js，取消VueDraggableNext的全局注册，改为仅在需要的组件中局部导入，彻底消除全局层面的组件冲突：

// main.js 移除全局注册VueDraggableNext的代码
// 原代码：createApp(App).use(vuetify).use(VueDraggableNext).mount('#app')
// 修改后：
createApp(App).use(vuetify).mount('#app')

内容的提问来源于stack exchange，提问作者quilkin