我完全懂你碰到的这个麻烦——在嵌套列表里同时用v-hover和v-list-group的activator插槽时，俩插槽都返回了需要绑定到v-list-item的props对象，直接用的话后一个会把前一个覆盖，要么悬停功能失效，要么列表组的折叠展开不好使。其实解决思路很简单，就是把这两个props对象合并起来就好啦！

核心解决方法 #

问题出在你当前的代码里，两个插槽的props变量名冲突了，而且没有合并它们的属性。我们只需要：

• 给两个插槽的props分别起不同的名字，避免变量冲突
• 使用对象扩展运算符...把两个props对象合并后，再绑定到v-list-item上

这样就能同时保留v-list-group的折叠激活逻辑和v-hover的悬停状态绑定啦。

修改后的treeBranch.vue代码 #

<template>
  <template v-for="(item,i) in list" :key="item.title">
    <!-- 处理有子项的列表组 -->
    <template v-if="item.childsCategory.length">
      <v-list-group subgroup fluid>
        <!-- 重命名activator的props为activatorProps -->
        <template v-slot:activator="{ props: activatorProps }">
          <!-- 重命名v-hover的props为hoverProps -->
          <v-hover v-slot="{ isHovering, props: hoverProps }">
            <!-- 合并两个props对象后绑定 -->
            <v-list-item v-bind="{ ...activatorProps, ...hoverProps }" :value="item.title">
              <v-list-item-title>{{ item.title }}</v-list-item-title>
              <template v-slot:append>
                <v-icon icon="$mdiInformationOutline"></v-icon>
                <v-btn 
                  variant="text" 
                  size="small" 
                  icon="$mdiDotsVertical"
                  :class="isHovering ? 'visible-btns': 'hidden-btns'"
                ></v-btn>
              </template>
            </v-list-item>
          </v-hover>
        </template>
        <treeBranch :list="item.childsCategory" :options="options"/>
      </v-list-group>
    </template>

    <!-- 处理无子项的普通列表项 -->
    <template v-else>
      <v-hover v-slot="{ isHovering, props }">
        <v-list-item :value="item.title" density="compact" v-bind="props">
          <v-list-item-title>{{ item.title }}</v-list-item-title>
          <template v-slot:append>
            <v-icon icon="$mdiInformationOutline"></v-icon>
            <v-btn 
              variant="text" 
              size="small" 
              icon="$mdiDotsVertical"
              :class="isHovering ? 'visible-btns': 'hidden-btns'"
            ></v-btn>
          </template>
        </v-list-item>
      </v-hover>
    </template>
  </template>
</template>

为什么这样有效？ #

• v-list-group的activatorProps里包含了展开/折叠所需的click事件、aria属性等绑定，确保列表组的折叠功能正常
• v-hover的hoverProps里包含了鼠标悬停相关的事件监听和状态绑定，确保悬停时按钮能正常显示
• 用{ ...activatorProps, ...hoverProps }合并后，两个对象的属性会被整合到一起，不会互相覆盖（如果有重复属性，后面的hoverProps会覆盖前面的，但这里两者的属性基本没有重叠，所以完全没问题）

备注：内容来源于stack exchange，提问作者Dima L