从可重用组件向导航抽屉发送道具

如何解决从可重用组件向导航抽屉发送道具

我创建了两个组件，Comp-A（可重用组件）和Comp-B。在组件B中，我使用了组件A并将道具发送到导航抽屉的A。在发送道具时，它仅列出了最后一个道具。但是我需要列出我发送的所有道具。您能帮我吗？

CompA（可重复使用）

<template>
 <v-navigation-drawer v-model="drawer">
        <v-list>
          <v-list-item :key="item.title">
            <v-list-item-icon>
              <v-icon>{{ item.icon }}</v-icon>
            </v-list-item-icon>
           <v-list-item-content>
              <v-list-item-title>{{ item.title }}</v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list>
      </v-navigation-drawer>
</template>
<script>
   export default{
     props:{
        item:{
         type:Object,default()=>{
             title:'',icon:'',}
        }
     }
  }
</script>

CompB

 <template>
       <div>
          <CompA :item="{title:'Dashboard',icon:'board'}"></CompA>
          <CompA :item="{title:'Cars',icon:'car'}"></CompA>
          <CompA :item="{title:'Contact Details',icon:'phone'}"></CompA>
       </div>
    </template>

注意：但是，它在导航抽屉中仅显示一个标题为“联系方式”。如何显示其余两个？？

解决方法

尝试从v-navigation-drawer中删除v-list和CompA并将其放入CompB中，如：

<template>
          <v-list-item :key="item.title">
            <v-list-item-icon>
              <v-icon>{{ item.icon }}</v-icon>
            </v-list-item-icon>
           <v-list-item-content>
              <v-list-item-title>{{ item.title }}</v-list-item-title>
            </v-list-item-content>
          </v-list-item>
     
     
</template>
<script>
   export default{
     props:{
        item:{
         type:Object,default()=>{
             title:'',icon:'',}
        }
     }
  }
</script

CompB

 <template>
       <v-navigation-drawer v-model="drawer">
         <v-list>
          <CompA :item="{title:'Dashboard',icon:'board'}"></CompA>
          <CompA :item="{title:'Cars',icon:'car'}"></CompA>
          <CompA :item="{title:'Contact Details',icon:'phone'}"></CompA>
         </v-list>
       </v-navigation-drawer>
    </template>