时间戳

首页 > 解决方案 > 从可重用组件发送道具用于导航抽屉

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

问题描述

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

复合B

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

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

标签： javascriptvue.jsvuejs2vue-componentvuetify.js

解决方案

尝试从中删除andv-navigation-drawer并将其放入：v-listCompACompB

<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

复合B

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

推荐阅读