如何将数据传递给子组件并在子组件中渲染？

Question

我试图将一个数组从父级传递给子级，但在子级而不是父级中渲染/输出它。在我发现的教程中，我只能在父级中渲染数组。因此，例如我有以下内容：

孩子

<template>

    <div>

        {{tile.name}} {{formattedPoints}}

    </div>

</template>

<script>

    export default {

        props: {

            tile: {

                required: true,

                type: Object

            }

        },

        

        computed: {

            formattedPoints() {

                return this.tile[0].name = 5

            }

        }

    }

</script>

父母

<template>

    <div>

        <User v-for="tile in tileMenu" :key="tile.id" :tile="tile" />

    </div>

</template>

<script>

    import User from './Home.vue'

    import { ref } from 'vue'

    export default {

        components: {

            User

        },

        setup() {

            const tileMenu = ref([

                { id: 1, name: 'tile1' },

                { id: 2, name: 'tile2' },

            ])

            return { tileMenu }

        }

    }

</script>

在这个例子中，我会和父母一起输出，但我喜欢和孩子一起输出。在我的思考过程中，这应该是可能的，因为无论如何我都会将数组传递给子组件，如果我这样调用它

<template>

    <div>

        {{tile[0].name}} 

    </div>

</template>

它应该给我子组件的输出。但这什么也没输出。我该如何解决这个问题？提前致谢

Answer 1

我可以建议你（并且 id 需要是唯一的，因为它是你在 for 循环中的关键）父母：<template>&nbsp; <div>&nbsp; &nbsp; <User :tileMenu="tileMenu" /> <!--pass all array-->&nbsp; </div></template><script>import User from "./Home.vue";const tileMenu = [&nbsp; { id: 1, name: "tile1NAME" },&nbsp; { id: 2, name: "tile2NAME" },];export default {&nbsp; components: {&nbsp; &nbsp; User,&nbsp; },&nbsp; data() {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; tileMenu: tileMenu,&nbsp; &nbsp; };&nbsp; },};</script>孩子：<template>&nbsp; <div>&nbsp; &nbsp; <div v-for="tile in tileMenuChild" :key="tile.id">&nbsp; &nbsp; &nbsp; {{ tile.name }} with id {{ tile.id }}&nbsp; &nbsp; </div>&nbsp; </div></template><script>export default {&nbsp; props: {&nbsp; &nbsp; tileMenu: Array,&nbsp; },&nbsp; data() {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; tileMenuChild: this.tileMenu,&nbsp; &nbsp; };&nbsp; },};</script>