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>

因此，我需要将道具（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>

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

1 个答案: