如何在Vue组件的树形视图中激活子分类？附组件代码示例

嘿，我来帮你搞定这个树形分类的激活功能！咱们一步步来实现：

首先得明确：树形结构的状态最好统一放在父组件管理，这样嵌套的子组件能共享激活状态，避免状态混乱。下面是具体的实现步骤：

1. 父组件添加激活状态与事件处理 #

先修改你的父组件，新增状态记录当前激活的分类ID，再添加方法来更新这个状态：

<template>
  ...
  <ul class="filter-category" v-for="list in categories" :key="list.id">
    <!-- 给子组件传递激活状态和点击回调 -->
    <list-category 
      :data="list" 
      :category-id="categoryId"
      :active-id="activeCategoryId"
      @toggle-active="handleToggleActive"
    ></list-category>
  </ul>
  ...
</template>

<script>
export default {
  ...
  data() {
    return {
      categories: [
        { id: 1, name: 'England', children: [
          { id: 3, name: 'Chelsea', children: [
            {id: 7, name: 'Hazard'},
            {id: 8, name: 'Morata'}
          ]},
          { id: 4, name: 'Man United' }
        ]}
      ],
      activeCategoryId: null // 存储当前激活的分类ID
    }
  },
  methods: {
    handleToggleActive(categoryId) {
      // 点击切换激活状态：已激活则取消，未激活则设置为当前ID
      this.activeCategoryId = this.activeCategoryId === categoryId ? null : categoryId;
    }
  }
  ...
}
</script>

2. 子组件list-category实现递归渲染与点击逻辑 #

因为是树形结构，子组件需要递归渲染自身（处理嵌套的children），同时响应点击事件并同步激活状态：

<template>
  <li>
    <!-- 给分类项绑定点击事件，添加激活样式 -->
    <span 
      class="category-item"
      :class="{ active: activeId === data.id }"
      @click="handleClick"
    >
      {{ data.name }}
    </span>
    <!-- 有子分类时递归渲染子组件 -->
    <ul v-if="data.children && data.children.length > 0">
      <list-category 
        v-for="child in data.children" 
        :key="child.id"
        :data="child"
        :active-id="activeId"
        @toggle-active="handleToggleActive"
      ></list-category>
    </ul>
  </li>
</template>

<script>
export default {
  name: 'ListCategory',
  props: {
    data: {
      type: Object,
      required: true
    },
    activeId: {
      type: Number,
      default: null
    }
  },
  methods: {
    handleClick() {
      // 点击当前分类时，向父组件发送事件传递ID
      this.$emit('toggle-active', this.data.id);
    },
    handleToggleActive(categoryId) {
      // 把内层子组件的点击事件向上传递，确保父组件能捕获到
      this.$emit('toggle-active', categoryId);
    }
  }
}
</script>

<style scoped>
/* 自定义激活样式示例 */
.category-item.active {
  color: #409eff;
  font-weight: bold;
  border-left: 2px solid #409eff;
  padding-left: 8px;
}
</style>

3. 关键逻辑说明 #

• 状态提升：激活状态放在父组件，所有子组件共享同一状态，避免嵌套组件的状态不同步。
• 事件冒泡传递：内层子组件的点击事件通过$emit逐层向上传递，最终让父组件统一处理状态更新。
• 递归渲染：子组件自身调用自己，完美适配任意层级的树形分类结构。
• 动态激活样式：通过:class判断当前分类ID是否匹配激活ID，自动切换样式。

如果需要支持多选激活，只需要把activeCategoryId改成数组activeCategoryIds: []，再修改父组件的事件方法：

handleToggleActive(categoryId) {
  if (this.activeCategoryIds.includes(categoryId)) {
    // 已激活则移除
    this.activeCategoryIds = this.activeCategoryIds.filter(id => id !== categoryId);
  } else {
    // 未激活则添加
    this.activeCategoryIds.push(categoryId);
  }
}

同时子组件的激活判断改成activeId.includes(data.id)即可。

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