Vue组件中点击元素时如何添加active类？

针对你的树形分类组件场景，我给你两种实用的实现方案，你可以根据需求选择：

方案一：组件内部维护激活状态（适合单个组件独立控制） #

这种方案让每个list-category组件自己管理自身的激活状态，适合不需要全局唯一激活的场景。

1. 更新组件的data属性 #

在组件的data中新增一个activeId属性，用来记录当前激活的分类ID：

data() {
  return {
    open: false,
    categoryId: this.category,
    activeId: null // 新增：存储当前激活的分类ID
  }
}

2. 修改模板绑定class和点击事件 #

在你的模板（#lc）中，给需要点击的分类元素绑定点击事件，并通过:class判断是否添加active类：

<template id="lc">
  <div>
    <!-- 分类项：绑定点击事件和active类 -->
    <div 
      class="category-item"
      @click="toggleActive"
      :class="{ active: activeId === data.id }"
    >
      <i :class="icon"></i>
      <span>{{ data.name }}</span>
    </div>
    <!-- 子分类列表（原有逻辑保留） -->
    <div v-if="isFolder && open">
      <list-category 
        v-for="child in data.children" 
        :key="child.id"
        :data="child"
        :category="category"
        :search="search"
      ></list-category>
    </div>
  </div>
</template>

3. 添加点击事件处理方法 #

在组件的methods中新增toggleActive方法，用来切换激活状态（同时可以保留原有的展开/折叠逻辑）：

methods: {
  toggleActive() {
    // 切换激活状态：如果当前已激活则取消，否则设置为当前分类ID
    this.activeId = this.activeId === this.data.id ? null : this.data.id;
    // 保留原有的展开/折叠逻辑
    this.open = !this.open;
  }
}

方案二：父组件统一管理激活状态（适合全局唯一激活场景） #

如果你的树形菜单需要全局只能有一个激活项，建议把激活状态提升到父组件，通过props和自定义事件实现父子通信。

1. 父组件添加激活状态 #

在父组件的data中新增activeCategoryId，用来存储全局激活的分类ID：

data() {
  return {
    // 其他父组件数据...
    activeCategoryId: null
  }
}

2. 父组件传递状态并监听事件 #

在父组件模板中，给list-category传递激活ID，并监听子组件的更新事件：

<!-- 父组件模板中的list-category调用 -->
<list-category 
  :data="yourRootData"
  :category="category"
  :search="search"
  :active-id="activeCategoryId"
  @update-active="activeCategoryId = $event"
></list-category>

3. 子组件更新props和事件 #

在子组件中新增activeId的props，并修改点击事件为触发自定义事件：

// 子组件props新增activeId
props: ['data', 'category', 'search', 'activeId'],
methods: {
  handleClick() {
    // 向父组件发送更新激活ID的事件
    this.$emit('update-active', this.data.id);
    // 保留原有的展开/折叠逻辑
    this.open = !this.open;
  }
}

4. 子组件模板绑定class #

子组件模板中的class绑定改为使用父组件传递的activeId：

<div 
  class="category-item"
  @click="handleClick"
  :class="{ active: activeId === data.id }"
>
  <!-- 图标和分类名称 -->
</div>

最后别忘了定义active样式 #

在你的CSS中添加active类的样式，比如：

.category-item.active {
  background-color: #f5f5f5;
  color: #2d3748;
  font-weight: 500;
  /* 根据你的需求调整样式 */
}

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