我正在try 构建我自己的sortable组件.我想要将项目列表传递到它的默认插槽.然后,可排序组件应该用定制的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组件来包装默认槽中的所有给定 node . 我的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组件之外,这按预期工作.所有项目都将被包装在名为<v-draggable>的html标签中. 我必须如何继续将v-draggable组件实际解析为Vue组件?

推荐答案

try 导入并注册并直接使用:

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

建议将项作为props 传递,并直接在Render函数中使用:

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

Javascript相关问答推荐

单个HTML中的多个HTML文件

为什么我的getAsFile()方法返回空?

Web Crypto API解密失败,RSA-OAEP

为什么客户端没有收到来自服务器的响应消息?

如何在JAVASCRIPT中合并两组对象并返回一些键

自定义确认组件未在vue.js的v菜单内打开

try 将Redux工具包与MUI ToggleButtonGroup组件一起使用时出错

通过跳过某些元素的对象进行映射

Promise.race()返回已解析的promise ,而不是第一个被拒绝的promise

Plotly.js栏为x轴栏添加辅助文本

如何使pdf.js上的文本呈现为可选?

如何使用fltter_js将对象作为参数传递给javascrip?

如果查询为空,则MongoDB将所有文档与$in匹配

如何在不将整个文件加载到内存的情况下,在Node.js中实现Unix粘贴命令?

如何从Reaction-Redux中来自API调用的数据中筛选值

如何调试从CEPRESS测试文件调用的Java脚本文件

在类中为其他方法中的addEventlistener调用方法中的元素HTML

在Reaction-Router-DOM v6中使用菜单的共享布局时出现问题

如何在Java脚本中 Select 该元素?-Chrome扩展

素材界面如何让自动完成弹出框不受菜单限制