Astuce Vue 3 pour envelopper tous les éléments dans des composants personnalisés à l'aide de fonctions de rendu

Question

J'essaie de créer mon propre composant Sortable. Je souhaite transmettre une liste d'éléments à son emplacement par défaut. Le composant triable doit ensuite envelopper tous les éléments transmis avec un composant v-draggable personnalisé.

<v-sortable handle=".handle">
    <template :key="index" v-for="(item, index) in items">
        <some-complex-component :item="item"></some-complex-component>
    </template>
</v-sortable>

Maintenant, en utilisant mon composant v-sortable 组件，我尝试使用自定义 v-draggable, j'essaie d'envelopper tous les nœuds donnés dans un emplacement par défaut à l'aide d'un composant v-sortable personnalisé. Mon composant

ressemble à ceci :

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 组件。所有项目都将包装在名为 Cela fonctionne comme prévu, sauf que mon composant personnalisé v-draggable ne s'affiche pas en tant que composant vue. Tous les éléments seront enveloppés dans des balises HTML nommées . Comment puis-je procéder pour analyser réellement le composant

en un composant Vue ? 🎜

Answer 1

Les composants peuvent être spécifiés explicitement dans la fonction de rendu :

h(VDraggable, ...)

Les composants enregistrés globalement qui ne peuvent pas être importés (par exemple à partir de bibliothèques tierces) peuvent être importés via resolveComponent.

Answer 2

Essayez d'importer et de vous inscrire directement et d'utiliser :

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

Il est recommandé de passer les éléments comme accessoires et de les utiliser directement dans la fonction de rendu :

<v-sortable handle=".handle" :items="items">
</v-sortable>

Sous-composant :

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