Vue自定义组件父子通信异常：手风琴容器未捕获子组件触发的自定义事件

• Vue 的自定义事件没有DOM冒泡机制，子组件emit的事件只会抛给它的直接父级（即模板中直接书写该子组件标签的上下文），不会沿着DOM树向上传递到任意上层组件
• 你当前的写法存在两个关键错误：
  1. 把@closeAccordions绑定在accordion-container的根<div>元素上，本质是给DOM节点绑定了一个不存在的自定义事件监听器，DOM本身永远不会触发这个由组件抛出的自定义事件
  2. 插槽内容的作用域属于书写位置的父组件，不是插槽所在的容器组件。你在业务页面中嵌套写的两个accordion组件，它的直接父级是承载页面的业务组件，不是accordion-container，所以事件只会抛给业务页面，accordion-container无论怎么监听都收不到

手风琴这类容器+面板的嵌套组件，最适合用Vue提供的provide/inject跨层级通信能力，不需要依赖emit链路，就能实现容器和内部所有面板的联动逻辑，完全符合组件封装的设计预期。

修正后的代码实现 #

accordion-container 容器组件 #

<template>
  <div class="accordion-container">
    <slot></slot>
  </div>
</template>
<script>
export default {
  // 向所有内部嵌套的accordion面板暴露通信能力
  provide() {
    return {
      // 记录当前处于展开状态的面板实例
      openPanel: null,
      // 提供给子面板调用的切换逻辑
      handlePanelToggle: (panelInstance) => {
        // 点击已展开的面板时，关闭它
        if (this.openPanel === panelInstance) {
          this.openPanel.isOpen = false
          this.openPanel = null
          return
        }
        // 关闭其他处于展开状态的面板
        if (this.openPanel) {
          this.openPanel.isOpen = false
        }
        // 激活当前点击的面板
        panelInstance.isOpen = true
        this.openPanel = panelInstance
      }
    }
  },
  methods: {
    closeOtherAccordions() {
      console.log('收到面板切换通知')
    }
  }
}
</script>

accordion 面板组件 #

<template>
  <div class="accordion" v-bind:class="{ open: isOpen }" :data-title="title">
    <div class="title" @click="toggleAccordion">
      <p>{{title}}</p>
    </div>
    <div class="content"><slot></slot></div>
  </div>
</template>
<script>
export default {
  props: ['title'],
  // 注入容器提供的切换方法
  inject: ['handlePanelToggle'],
  methods: {
    toggleAccordion() {
      // 点击时把自身实例传给容器，由容器统一处理联动逻辑
      this.handlePanelToggle(this)
    }
  },
  data() {
    return {
      isOpen: false
    }
  }
}
</script>

这种实现方式的优势：不管嵌套多少层面板，只要放在accordion-container内部，就能自动接入手风琴联动逻辑，不需要在业务页面写冗余的事件绑定，组件可复用性更强。

如果坚持用$emit的链路实现，必须把事件监听器绑定在组件被实际书写的位置，比如在业务页面写嵌套结构时，给每个accordion标签手动绑定@closeAccordions事件。但这种写法会导致容器组件无法拿到所有面板的实例，很难实现跨面板的关闭控制，每新增一个面板都要手动补事件监听，封装性较差，不适合作为这类嵌套组件的长期实现方案。

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