从动态组件列表中的父组件读取道具答案

【问题标题】：Read props from parent component in a list of dynamic components从动态组件列表中的父组件读取道具
【发布时间】：2020-02-14 11:24:56
【问题描述】：

我在通过 Vue.js 中的 props 从父级到子级读取传递的数据时遇到问题。我有一个组件列表

components: [
        {
          name: "Cart Overview",
          component: "CartOverview",
          props: this.shopperCart
        },
        {
          name: "Bank Account Overview",
          component: "BankAccountOverview",
          props: {}
        },
        { name: "Verification", component: "Verification", props: {} },
        {
          name: "Completion Message",
          component: "CompletionMessage",
          props: {}
        }
      ]

变量“shopperCart”由来自后端的请求设置。

父组件的模板

<div class="modal-body">
  <component
    :is="checkoutComponents[currentStep].component"
    v-bind="checkoutComponents[currentStep].props"
  ></component>
</div>

用户可以通过设置变量 currentStep 的下一步按钮来浏览组件。

一个子组件的示例

<template>
  <div>
    <h1>Cart Oerview</h1>
    {{ shopperCart }}
  </div>
</template>
<script>
export default {
  name: "CartOverview",
  props: {
    shopperCart: { type: Object, default: () => {} }
  },
  mounted() {
    console.log("shopperCart", this.shopperCart);
  }
};
</script>

组件位于模态框上。日志输出仅在我刷新页面时显示未定义，我可以在其中打开模式。

有人可以帮帮我吗？

最好的问候， A.梅伦

【问题讨论】：

标签： vue.js vue-component

【解决方案1】：

我找到了自己的解决方案。我在父组件中将v-bind 更改为:data

<div class="modal-body">
  <component
    :is="checkoutComponents[currentStep].component"
    :data="checkoutComponents[currentStep].props"
  ></component>
</div>

在子组件中是道具的名称

<template>
  <div>
    <h1>Cart Oerview</h1>
    {{ data }}
  </div>
</template>
<script>
export default {
  name: "CartOverview",
  props: {
    data: { type: Object, default: () => {} }
  },
  mounted() {
    console.log("shopperCart", this.data);
  }
};
</script>

现在可以了:-)

【讨论】：