我正在嘗試建立自己的可排序元件。我想將項目列表傳遞到它的預設插槽。然後,可排序元件應使用自訂 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
元件將所有給定節點包裝在預設插槽中。
我的 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 元件。所有項目都將包裝在名為
的 html 標籤中。
我該如何繼續將 v-draggable
元件實際解析為 Vue 元件?
P粉1477476372023-12-28 20:53:19
元件可以在渲染函數中明確指定:
h(VDraggable, ...)
無法匯入的全域註冊元件(例如來自第三方函式庫)可以透過 resolveComponent
。
P粉5144588632023-12-28 15:08:06
嘗試導入並直接註冊並使用:
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 傳遞並直接在渲染函數中使用它們:
<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; } }