Vue 3-Trick, um alle Elemente mithilfe von Renderfunktionen in benutzerdefinierte Komponenten einzuschließen

Question

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

-Komponente sieht so aus:

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 组件。所有项目都将包装在名为 Das funktioniert wie erwartet, außer dass meine benutzerdefinierte Komponente v-draggable nicht als Vue-Komponente gerendert wird. Alle Elemente werden in HTML-Tags mit dem Namen eingeschlossen. Wie gehe ich vor, um die

-Komponente tatsächlich in eine Vue-Komponente zu parsen? 🎜

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