国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

使用渲染函數(shù)將所有項目包裝在自定義組件中的Vue 3技巧
P粉926174288
P粉926174288 2023-12-27 21:49:07
0
2
710

我正在嘗試構(gòu)建自己的可排序組件。我想將項目列表傳遞到它的默認(rèn)插槽。然后,可排序組件應(yīng)使用自定義 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>

現(xiàn)在,使用我的 v-sortable 組件,我嘗試使用自定義 v-draggable 組件將所有給定節(jié)點包裝在默認(rèn)插槽中。 我的 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;
    }
}

這按預(yù)期工作,除了我的自定義組件 v-draggable 不會呈現(xiàn)為 vue 組件。所有項目都將包裝在名為 的 html 標(biāo)簽中。 我該如何繼續(xù)將 v-draggable 組件實際解析為 Vue 組件?

P粉926174288
P粉926174288

全部回復(fù)(2)
P粉147747637

組件可以在渲染函數(shù)中顯式指定:

h(VDraggable, ...)

無法導(dǎo)入的全局注冊組件(例如來自第三方庫)可以通過 resolveComponent。

P粉514458863

嘗試導(dǎo)入并直接注冊并使用:

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 傳遞并直接在渲染函數(shù)中使用它們:

<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;
    }
}
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板