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

Posted 2023-02-23

【中文标题】从动态组件列表中的父组件读取道具

【英文标题】：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.梅伦

【参考方案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>

现在可以了:-)