使用渲染函數將所有項目包裝在自訂元件中的Vue 3技巧

Question

我正在嘗試建立自己的可排序元件。我想將項目列表傳遞到它的預設插槽。然後，可排序元件應使用自訂 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 元件？

Answer 1

元件可以在渲染函數中明確指定：

h(VDraggable, ...)

無法匯入的全域註冊元件（例如來自第三方函式庫）可以透過 resolveComponent。

Answer 2

嘗試導入並直接註冊並使用：

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;
    }
}