我正在try 构建我自己的sortable组件.我想要将项目列表传递到它的默认插槽.然后,可排序组件应该用定制的v-draggable
组件包装所有传递的项.
<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
组件来包装默认槽中的所有给定 node .
我的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>
的html标签中.
我必须如何继续将v-draggable
组件实际解析为Vue组件?