Vue.js VuetifyVue3 插槽模板之间的阴影

发布于09月07日

我正在寻找正确的方式来显示来自子模板中的父模板的对象.但是，在下面的情况下，对象都具有相同的名称，并且父模板中的对象被阴影.有没有一种简单的方法来重命名一个值，或者我需要做一些更复杂的事情才能在子模板中同时显示这两个值？

<v-data-table :items="someParentItems" ...>
 <template v-slot:expanded-row="{ columns, item }">
   PARENT {{ item }}
   <v-data-table :items="someChildItems" ...>
     <template #item.someField="{ item }">
       CHILD {{ item }} <!-- Would really like CHILD {{ parentItem }} {{ childItem }} -->
     </template>
   </v-data-table>
 </template>
</v-data-table>

推荐答案

这只是简单的对象解构，你可以在冒号后面设置新的名称:

<v-data-table :items="someParentItems" ...>
 <template v-slot:expanded-row="{ columns, item: parentItem }">
   PARENT {{ parentItem }}
   <v-data-table :items="someChildItems" ...>
     <template #item.someField="{ item: childItem }">
        CHILD {{ parentItem }} {{ childItem }}
     </template>
   </v-data-table>
 </template>
</v-data-table>