Vue3 如何让ExpansionPanel的emit调用ExpansionPanels函数且不修改App.vue

你当前的问题在于：通过slot渲染的子组件（ExpansionPanel）的emit事件无法直接被父容器（ExpansionPanels）的slot绑定捕获，因为slot内容是在App.vue的上下文里渲染的。下面提供两种无需修改App.vue的解决方案：

方案一：使用Provide/Inject传递方法（推荐Vue3风格） #

这是Vue官方推荐的组件树内跨层级传递数据/方法的方式，完全不需要中间组件（App.vue）参与。

修改ExpansionPanels.vue #

<template>
  <div>
    <slot />
  </div>
</template>

<script setup>
import { provide } from 'vue'

const openPanel = () => {
  // 这里写你的面板打开逻辑
  console.log('触发了openPanel方法')
}

// 把openPanel方法提供给所有子组件
provide('openPanel', openPanel)
</script>

修改ExpansionPanel.vue #

<template>
  <div>
    <slot />
    <button @click="handleOpen">打开面板</button>
  </div>
</template>

<script setup>
import { inject } from 'vue'

// 注入父组件提供的openPanel方法
const openPanel = inject('openPanel')

const handleOpen = () => {
  // 调用方法前做个判断避免报错
  if (openPanel) openPanel()
}
</script>

方案二：利用自定义事件冒泡 #

通过Vue的自定义事件冒泡特性，让ExpansionPanel触发的事件自动向上传递到ExpansionPanels容器。

修改ExpansionPanels.vue #

<template>
  <div @open:panel="openPanel">
    <slot />
  </div>
</template>

<script setup>
const openPanel = () => {
  // 这里写你的面板打开逻辑
  console.log('触发了openPanel方法')
}
</script>

修改ExpansionPanel.vue #

<template>
  <div>
    <slot />
    <button @click="$emit('open:panel')">打开面板</button>
  </div>
</template>

<script setup>
// 显式声明emit事件（Vue3规范要求）
defineEmits(['open:panel'])
</script>

两种方案都不需要改动App.vue的代码，你可以根据项目习惯选择。

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