Ich versuche, meine eigene Sortable Komponente zu erstellen. Ich möchte eine Liste von Elementen an den Standard-Slot übergeben. Die sortierbare Komponente sollte dann alle übergebenen Elemente mit einer benutzerdefinierten v-draggable-Komponente umschließen.
<v-sortable handle=".handle">
<template :key="index" v-for="(item, index) in items">
<some-complex-component :item="item"></some-complex-component>
</template>
</v-sortable>
Jetzt versuche ich mit meiner v-sortable 组件，我尝试使用自定义 v-draggable-Komponente, alle gegebenen Knoten mithilfe einer benutzerdefinierten v-sortable-Komponente in einen Standard-Slot einzuschließen.
Meine
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 nicht als Vue-Komponente gerendert wird. Alle Elemente werden in HTML-Tags mit dem Namen 
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
组件可以在渲染函数中显式指定：
无法导入的全局注册组件（例如来自第三方库）可以通过
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; } }