我正在嘗試構(gòu)建自己的可排序組件。我想將項目列表傳遞到它的默認(rèn)插槽。然后,可排序組件應(yīng)使用自定義 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>
現(xiàn)在,使用我的 v-sortable
組件,我嘗試使用自定義 v-draggable
組件將所有給定節(jié)點包裝在默認(rèn)插槽中。
我的 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; } }
這按預(yù)期工作,除了我的自定義組件 v-draggable
不會呈現(xiàn)為 vue 組件。所有項目都將包裝在名為
的 html 標(biāo)簽中。
我該如何繼續(xù)將 v-draggable
組件實際解析為 Vue 組件?
嘗試導(dǎo)入并直接注冊并使用:
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 傳遞并直接在渲染函數(shù)中使用它們:
<v-sortable handle=".handle" :items="items"> </v-sortable>
子組件:
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; } }