封装Vuetify v-data-table后无法访问item插槽的解决方法

v-bind="$attrs"和v-on="$listeners"仅负责透传组件属性、绑定事件，不会自动透传插槽内容。你在父组件写在<DataTable>标签内的插槽内容，默认会注入到自定义DataTable组件的对应插槽位置，但你的封装代码里没有把接收到的插槽再转发给内部的<v-data-table>组件，v-data-table拿不到item.fullName这类自定义列插槽的渲染逻辑，自然不会生效。

根据你使用的Vue版本调整封装组件的代码，核心逻辑是遍历组件接收到的所有作用域插槽，原样透传给内部的v-data-table即可。

• 如果你用的是 Vue2 + Vuetify2（你的代码里使用$listeners属于该版本的写法），修改DataTable.vue代码如下：

<!-- DataTable.vue -->
<template>
  <v-data-table
    class="elevation-1"
    v-bind="$attrs"
    v-on="$listeners"
    dense
  >
    <!-- 遍历透传所有作用域插槽给内部表格组件 -->
    <template v-for="(_, slotName) in $scopedSlots" v-slot:[slotName]="slotProps">
      <slot :name="slotName" v-bind="slotProps" />
    </template>
  </v-data-table>
</template>

• 如果你用的是 Vue3 + Vuetify3，Vue3已经移除了$listeners（事件统一归到$attrs），作用域插槽统一存在$slots属性中，修改代码如下：

<!-- DataTable.vue (Vue3版本) -->
<template>
  <v-data-table
    class="elevation-1"
    v-bind="$attrs"
    dense
  >
    <!-- 遍历透传所有作用域插槽给内部表格组件 -->
    <template v-for="(_, slotName) in $slots" v-slot:[slotName]="slotProps">
      <slot :name="slotName" v-bind="slotProps" />
    </template>
  </v-data-table>
</template>

补充说明：如果你的封装组件需要给v-data-table加固定的自定义插槽内容（比如顶部搜索区、底部操作栏），直接在v-data-table标签内手动写对应具名插槽即可，手动声明的插槽优先级高于遍历透传的逻辑，不会被覆盖。

修改完成后，你原来PeopleView.vue里的写法不需要做任何调整，item.fullName列的自定义加粗渲染逻辑就会正常生效。

内容的提问来源于stack exchange，提问作者PyKKe