탐색 드로어의 재사용 가능한 구성 요소에서 소품 전송

탐색 드로어의 재사용 가능한 구성 요소에서 소품 전송

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

참고: 그러나 네비게이션 드로어에는 "연락처 세부사항"이라는 제목만 표시된다.나머지 두 개는 어떻게 표시하지?

제거 시도v-navigation-drawer그리고v-list로부터CompA그리고 그것을 집어넣다CompBlike :

<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

콤프비

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

참조URL: https://stackoverflow.com/questions/63536471/sending-props-from-reusable-component-for-navigation-drawer