自定义Vue InstantSearch中AisHierarchicalMenu取消子facet时的refine行为

问题背景 #

AisHierarchicalMenu默认行为：选中父分类后再选择子分类，取消子分类时会同时清空父、子分类的选中状态，清除整个相关搜索条件。使用Vue InstantSearch Options API版本，需求为：仅取消子分类时，父分类仍保持选中状态，且尽量避免创建全新自定义组件。

此前尝试自定义传入refine()的参数，但无论传值如何，refine()都会切换父分类的选中状态。

解决方案 #

可以通过自定义item-template插槽覆盖默认的refine逻辑，无需完全重写组件：

1. 自定义菜单项模板 #

在AisHierarchicalMenu中使用item-template插槽，自定义每个菜单项的点击触发逻辑：

<ais-hierarchical-menu
  :attributes="['category.lvl0', 'category.lvl1', 'category.lvl2']"
>
  <template #item-template="{ item, refine, isRefined }">
    <div @click="handleRefine(item, refine, isRefined)">
      {{ item.label }}
      <span v-if="item.count">({{ item.count }})</span>
    </div>
  </template>
</ais-hierarchical-menu>

2. 实现自定义点击处理方法 #

在Vue组件的methods中添加逻辑，针对已选中的子分类，手动保留父分类路径后调用refine：

methods: {
  handleRefine(item, refine, isRefined) {
    if (isRefined && item.path.length > 1) {
      // 点击已选中的子分类，仅保留父级路径
      const parentPath = item.path.slice(0, -1);
      refine(parentPath);
    } else {
      // 其他场景沿用默认refine逻辑
      refine(item.value);
    }
  }
}

逻辑说明 #

• 当点击已选中的子分类（isRefined为true且item.path长度大于1，说明存在父级分类），截取父级路径数组传入refine，实现仅取消子分类、保留父分类选中状态的效果。
• 选中父分类、选择未选中的子分类等场景，仍使用默认refine逻辑，保证原有功能正常运行。

补充说明 #

这种方式利用组件插槽能力，仅覆盖点击逻辑，无需完全自定义组件，既满足需求又减少代码量。若分类层级更多，该逻辑依然适用，因为path会自动匹配对应层级结构。

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