Vue父折叠组件展开时嵌套折叠组件意外触发展开问题

哈哈，这个嵌套折叠组件的坑我之前踩过！点父组件的触发器连子的也跟着展开，大概率是两个原因在搞事：状态变量共用或者事件冒泡没处理，我给你拆解下：

1. 状态变量被共享了 #

如果你的父折叠组件和嵌套的子组件用了同一个isOpen（或类似的）状态变量来控制展开/收起，那父组件切换状态时，子组件自然会跟着同步变化——毕竟它们绑定的是同一个值嘛！

比如这种错误写法：

<template>
  <Collapse v-model="isOpen">
    <template #trigger>父折叠触发器</template>
    <!-- 子组件用了和父一样的isOpen变量 -->
    <Collapse v-model="isOpen">
      <template #trigger>子折叠触发器</template>
      子折叠内容
    </Collapse>
  </Collapse>
</template>

<script setup>
import { ref } from 'vue'
const isOpen = ref(false)
</script>

2. 事件冒泡导致误触发 #

如果状态变量是独立的，但还是出现这个问题，那大概率是点击事件冒泡在捣乱：当你点击父组件的触发器时，click事件会沿着DOM树传播，触发了子组件内部的展开逻辑——尤其是如果你的折叠组件内部是通过监听父容器点击来切换状态的话。

1. 给每个折叠组件分配独立的状态变量 #

确保父、子组件的展开状态各管各的，不要共用同一变量：

<template>
  <Collapse v-model="parentIsOpen">
    <template #trigger>父折叠触发器</template>
    <Collapse v-model="childIsOpen">
      <template #trigger>子折叠触发器</template>
      子折叠内容
    </Collapse>
  </Collapse>
</template>

<script setup>
import { ref } from 'vue'
const parentIsOpen = ref(false)
const childIsOpen = ref(false)
</script>

2. 阻止触发器的事件冒泡 #

在父组件（或者所有折叠组件）的触发器元素上添加@click.stop修饰符，切断事件的传播路径，避免子组件误触发：

<!-- 假设你的自定义Collapse组件内部的触发器是这么写的 -->
<template>
  <div class="collapse-container">
    <!-- 加上.stop阻止事件冒泡 -->
    <div class="trigger" @click.stop="toggleCollapse">
      <slot name="trigger"></slot>
    </div>
    <transition name="collapse-transition">
      <div v-show="isOpen" class="content">
        <slot></slot>
      </div>
    </transition>
  </div>
</template>

如果是在使用组件时单独处理父触发器的冒泡，也可以这么写：

<Collapse v-model="parentIsOpen">
  <!-- 在插槽的触发器元素上添加.stop -->
  <template #trigger>
    <div @click.stop>父折叠触发器</div>
  </template>
  <Collapse v-model="childIsOpen">
    <template #trigger>子折叠触发器</template>
    子折叠内容
  </Collapse>
</template>

3. 检查组件内部的状态逻辑 #

如果是你自己封装的折叠组件，还要确保内部的状态切换逻辑是仅监听自身触发器的点击，而不是监听组件根元素的点击——比如不要在根容器上绑定@click="toggle"，而是只在触发器元素上绑定，这样就不会被外部的点击事件影响。

按照这几步排查下来，应该就能解决父触发器带动子组件展开的问题啦！

内容的提问来源于stack exchange，提问作者QaMar ALi