我正在尝试构建自己的可排序组件。我想将项目列表传递到它的默认插槽。然后，可排序组件应使用自定义 v-draggable 组件包装所有传递的项目。
2
1150<v-sortable handle=".handle">
<template :key="index" v-for="(item, index) in items">
<some-complex-component :item="item"></some-complex-component>
</template>
</v-sortable>
现在，使用我的 v-sortable 组件，我尝试使用自定义 v-draggable 组件将所有给定节点包装在默认插槽中。
我的 v-sortable 组件如下所示：
import { h } from 'vue';
export default {
name: 'v-sortable',
props: {
handle: {
type: String,
required: false,
default: () => {
return null;
}
},
},
render () {
const draggableItems = this.$slots.default().map(slotItem =>
h('v-draggable', { handle: this.handle }, [slotItem])
)
return draggableItems;
}
}
这按预期工作，除了我的自定义组件 v-draggable 不会呈现为 vue 组件。所有项目都将包装在名为 v-draggable 组件实际解析为 Vue 组件？
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
组件可以在渲染函数中显式指定：
无法导入的全局注册组件（例如来自第三方库）可以通过
resolveComponent。尝试导入并直接注册并使用：
import { h } from 'vue'; import VDraggable from 'path/to/v-draggable' export default { name: 'v-sortable', props: { handle: { type: String, required: false, default: () => { return null; } }, }, render () { const draggableItems = this.$slots.default().map(slotItem => h(VDraggable, { handle: this.handle }, [slotItem]) ) return draggableItems; } }建议将项目作为 prop 传递并直接在渲染函数中使用它们：
子组件：
import { h } from 'vue'; import VDraggable from 'path/to/v-draggable' export default { name: 'v-sortable', props: { items:{ type:Array, default: () =>[] }, handle: { type: String, required: false, default: () => { return null; } }, }, render () { const draggableItems = this.items.map(slotItem => h(VDraggable, { handle: this.handle }, [item]) ) return draggableItems; } }