Vue3组合式API手风琴组件点击时全部展开异常排查

问题核心原因 #

你遇到的问题并非CSS导致，而是父组件对isOpen状态的管理逻辑错误。你的子组件通过父传的isOpen prop控制内容显示，如果父组件用同一个变量控制所有手风琴的展开状态，点击单个手风琴时会触发所有组件的状态同步变更，即便v-if隐藏了内容，父容器也会因状态重渲染出现高度变化。

解决方案 #

第一步：修复父组件的状态管理 #

父组件需要为每个手风琴维护独立的展开状态，用数组/对象存储每个accordionId对应的状态，避免全局变量同步所有组件：

<template>
  <div class="accordion-container">
    <Accordion
      v-for="item in accordionItems"
      :key="item.id"
      :title="item.title"
      :content="item.content"
      :isOpen="openIds.includes(item.id)"
      :accordionId="item.id"
      @accordionClick="handleToggle"
    />
  </div>
</template>

<script setup lang="ts">
import Accordion from './Accordion.vue'
import { ref } from 'vue'

// 手风琴数据源
const accordionItems = ref([
  { id: 'acc-1', title: '标题1', content: '内容1' },
  { id: 'acc-2', title: '标题2', content: '内容2' },
  { id: 'acc-3', title: '标题3', content: '内容3' }
])

// 存储已展开的手风琴ID（支持多开）
const openIds = ref<string[]>([])

// 处理点击事件
const handleToggle = (id: string) => {
  const idx = openIds.value.indexOf(id)
  if (idx > -1) {
    // 关闭当前手风琴
    openIds.value.splice(idx, 1)
  } else {
    // 若要实现「单开模式」（每次只展开一个），替换为下面一行
    // openIds.value = [id]
    openIds.value.push(id)
  }
}
</script>

第二步：优化子组件的过渡效果（可选） #

原代码用v-if会直接销毁DOM，过渡动画无法生效。建议换成v-show或动态class控制，让展开/收起的过渡更平滑：

方案1：用动态class控制状态

修改子组件模板：

<div :class="['accordion-body', { open: isOpen }]">
  <p>{{ content }}</p>
</div>

更新子组件CSS：

.accordion-body {
  padding: 0 1rem;
  background-color: #ffffff;
  color: #333;
  font-size: 1rem;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.3s ease;
  max-height: 0;
  opacity: 0;
  border-top: none;
}

.accordion-body.open {
  max-height: 500px;
  padding: 1rem;
  opacity: 1;
  border-top: 1px solid #e0e0e0;
}

方案2：用v-show保留DOM

修改子组件模板：

<div v-show="isOpen" class="accordion-body">
  <p>{{ content }}</p>
</div>

更新子组件CSS，补充关闭状态样式：

.accordion-body {
  padding: 1rem;
  background-color: #ffffff;
  border-top: 1px solid #e0e0e0;
  color: #333;
  font-size: 1rem;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
  max-height: 500px;
  opacity: 1;
}

.accordion-body:not([style*="display: block"]) {
  max-height: 0;
  padding: 0 1rem;
  opacity: 0;
  border-top: none;
}

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