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

Posted 2023-02-23

【中文标题】从可重用组件发送道具用于导航抽屉

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

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

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