从可重用组件发送道具用于导航抽屉答案

【问题标题】：Sending props from reusable component for navigation drawer从可重用组件发送道具用于导航抽屉
【发布时间】：2020-12-11 15:26:50
【问题描述】：

我创建了两个组件，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>

补偿

 <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>

注意：但它只在导航抽屉中显示一个标题，即“联系人详细信息”。我怎样才能显示剩余的两个？？

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component vuetify.js

【解决方案1】：

尝试从CompA 中删除v-navigation-drawer 和v-list 并将其放入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>

【讨论】：