使用渲染函数将所有项目包装在自定义组件中的Vue 3技巧
P粉926174288
P粉926174288 2023-12-27 21:49:07
0
2
577

我正在尝试构建自己的可排序组件。我想将项目列表传递到它的默认插槽。然后,可排序组件应使用自定义 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 组件?

P粉926174288
P粉926174288

全部回复(2)
P粉147747637

组件可以在渲染函数中显式指定:

h(VDraggable, ...)

无法导入的全局注册组件(例如来自第三方库)可以通过 resolveComponent

P粉514458863

尝试导入并直接注册并使用:

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;
    }
}
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板