Helah Vue 3 untuk membalut semua item dalam komponen tersuai menggunakan fungsi render

Question

Saya cuba membina komponen Boleh disortir saya sendiri. Saya mahu menghantar senarai item ke slot lalainya. Komponen boleh diisih kemudiannya hendaklah membalut semua item yang diluluskan dengan komponen v-draggable tersuai.

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

Kini, menggunakan komponen v-sortable 组件，我尝试使用自定义 v-draggable saya, saya cuba membungkus semua nod yang diberikan dalam slot lalai menggunakan komponen v-sortable tersuai. Komponen

saya kelihatan seperti ini:

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 组件。所有项目都将包装在名为 Ini berfungsi seperti yang diharapkan, kecuali komponen tersuai saya v-draggable tidak dipaparkan sebagai komponen vue. Semua item akan dibalut dengan tag html bernama . Bagaimanakah saya boleh meneruskan untuk menghuraikan komponen

ke dalam komponen Vue? 🎜

Answer 1

Komponen boleh dinyatakan secara eksplisit dalam fungsi render:

h(VDraggable, ...)

Komponen berdaftar global yang tidak boleh diimport (cth. daripada perpustakaan pihak ketiga) boleh diimport melalui resolveComponent.

Answer 2

Cuba import dan daftar terus dan gunakan:

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

Adalah disyorkan untuk menghantar item sebagai prop dan menggunakannya terus dalam fungsi render:

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

Subkomponen:

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