如何将道具传递给插槽中的组件？

Question

我正在开发一个后端带有 pimcore 和 twig 的 Vue 应用程序。我必须创建一个接收插槽的组件（另一个组件），并在内部渲染它，但使用动态道具。

这是 viani.twig.html 中的根目录：

<div>
    <viani-accordion>
        <viani-filter-checkbox v-slot="{filterRows}"></viani-filter-checkbox>
    </viani-accordion>
</div>

没有什么特别的。 viani-accordion 是父组件，viani-filter-checkbox 是 slot，我必须使用适当的道具进行渲染。

在这里你可以看到 VianiAccordion.vue：

<template>
    <div class="wrapper">
        <AccordionTitle v-for="(item, index) in dataToRender" :item="item" :key="index">
            /*I think this is incorrect, but I'm trying to prop data that I need in viani-filter-checkbox*/         
            <slot :filter-rows="item.items"></slot>
        </AccordionTitle>
    </div>
</template>
<script>
    import AccordionTitle from './Accordion-Title';
    export default {
        name: "Viani-Accordion",

        components: {AccordionTitle},

        data() {
            return {
                dataToRender: [
                    {
                        name: 'first item',
                        items: [
                            {
                                name: 'oil olive',
                                quantity: 10,
                            },
                            {
                                name: 'subitem 2',
                                quantity: 11,
                            },
                        ]
                    },
                    {
                        name: 'second item',
                        items: [
                            {
                                name: 'subitem 1',
                                quantity: 10,
                            },
                            {
                                name: 'subitem 2',
                                quantity: 11,
                            },
                        ]
                    }
                ]
            }
        },
    }
</script>

然后我有另一个更深层次的子组件 Accordion-Title.vue 负责渲染插槽（所以我必须通过多个组件传递插槽）：

<template>
    <div v-if="isOpen" class="child-wrapper">
        /*I think this is incorrect, but I'm trying to prop data that I need in viani-filter-checkbox*/
        <slot :filterRows="item.items"></slot>
    </div>
</template>
<script>
    export default {
        name: "Accordion-Title",
        props: {
            item: {
                type: Object,
                default: null
            }
        }
    }
</script>

最后是 Viani-FiltersCheckbox.vue：

<template>
    <div>
        //child component which we don't need in this case
        <FilterCheckboxRow v-for="(item, index) in filterRows" :item="item" :key="index"/>
    </div>
</template>

<script>
    import FilterCheckboxRow from './FilterCheckboxRow'
    export default {
        name: "VianiFilterCheckbox",
        components: {
            FilterCheckboxRow
        },
        props: {
            //here I expect to get array to render, but got default value (empty array)
            filterRows: {
                type: Array,
                default: function () {
                    return []
                }
            },
        },
    }
</script>

所以我需要将 props (filterRows) 传递给组件 (Viani-FiltersCheckbox.vue)，该组件呈现为插槽。我已经阅读了this 和this，但仍然不知道错误在哪里以及如何获得我需要的道具。

Answer 1

您似乎正在尝试通过props.XXX 访问您的道具。这通常只在functional components 的模板中完成。否则，将在没有 props. 前缀的情况下访问道具（即，props.item.items 应该是 item.items）。

要将filterRows 从范围数据传递给子组件，声明一个<template>，然后将您的孩子移动到其中，在那里绑定filterRows：

<viani-accordion>
    <!-- BEFORE: -->
    <!-- <viani-filter-checkbox v-slot="{filterRows}"></viani-filter-checkbox> -->

    <template v-slot="{filterRows}">
        <viani-filter-checkbox :filterRows="filterRows"></viani-filter-checkbox>
    </template>
</viani-accordion>