Vue子组件如何使用父组件传递的Object类型Prop？

我来帮你排查这个问题——你遇到的legend未定义错误，根源出在父组件传递props的方式上，咱们一步步来修正：

问题原因分析 #

你在父组件里用了v-bind="legend"，这个语法的作用是把legend对象的所有属性单独展开成props传递给子组件，而不是传递一个名为legend的完整对象。但你的子组件声明的props是{ legend: Object }，期望接收一个叫legend的对象，这就导致子组件根本没拿到这个prop，自然会报错legend未定义。

解决方案一（推荐）：直接传递legend对象 #

修改父组件的代码，把v-bind="legend"改成:legend="legend"，明确传递名为legend的prop：

<!-- 父组件修改后代码 -->
<alst-card v-for="(legend, index) in profile.legends.all" :key="index" :legend="legend"></alst-card>

子组件的代码保持不变即可，因为现在它能正确接收到legend对象，模板里的{{ legend.data.kills.value }}就能正常渲染了。

解决方案二（不推荐，仅作拓展）：接收展开后的属性 #

如果你非要用v-bind="legend"的方式，那子组件需要声明legend对象里的具体属性作为props，比如如果legend里包含data属性，子组件可以这样写：

<!-- 子组件修改后代码 -->
<p class="card-text" style="min-width: 100px">{{ data.kills.value }}</p>

<script>
export default {
  props: {
    data: Object // 直接接收展开后的data属性
  }
}
</script>

这种方式的缺点是，如果legend结构复杂，你需要声明很多props，维护起来很麻烦，所以更推荐第一种方案。

额外验证点 #

最后可以确认一下profile.legends.all确实是一个有效的数组，确保v-for能正确遍历生成卡片。如果这个值是异步加载的，记得添加判断避免初始渲染时的报错，比如在父组件里加v-if="profile.legends.all"：

<alst-card 
  v-for="(legend, index) in profile.legends.all" 
  :key="index" 
  :legend="legend"
  v-if="profile.legends.all"
></alst-card>

内容的提问来源于stack exchange，提问作者Jessey Fransen