vue js如何通过方法将数据从父组件，v-for循环列表传递给子组件

Question

我正在尝试实现一个在子组件(modal-component)中显示每个项目收据数组的项目列表，但一直无法实现。方法display_receipts()将receipts_modal的数据值更改为true。我可以把v-bind放在哪里来传递数组？任何帮助都是非常感谢的。

父级：

<modal-component v-if="receipts_modal"></modal-component>
<ul>
    <li v-for="item in items">{{ item.name }} 
    <span @click="display_receipts(item.receipts)">receipts</span>
    </li>
</ul>

孩子：

<template>
    <div class="modal">
        <ul>
            <li v-for="receipt in receipts">{{ receipt.date }} {{ receipt.email }} {{ receipt.item }}</li>
        </ul>
    </div>
</template>
<script>
export default {
    props: [receipts],
    data() {
        return {
            receipts: [],
            receipt: {
                id: '',
                date: '',
                email: '',
                item: ''
            }
        }
    }
}
</script>

Answer 1

父组件:我在data()中添加了一个receipts: {}的键。方法display_receipts(item.receipts)添加了将数据从循环传递到receipts{}的功能

display_receipts(receipts) {
    this.receipts = receipts;
    this.receipts_modal = true;
}

Answer 2

你需要把它当做道具传过去，

<modal-component :receipts="receipts_modal" v-if="receipts_modal"></modal-component>

在子组件中，您可以接收它，这很好，但是您不能将它作为道具从父组件发送