将数据从插槽内的子组件传递到父组件（vue.js）

Question

这个问题与vue.js version 3有关。我有一个App.vue组件，它定义了网站的布局，代码如下。

<template>
  <div>
    <shuzia-navigation />
    <slot></slot> 
//passing data from a component inside this slot tag down the <shuzia-music-player/> down there.
    <shuzia-footer />
    <div class="mt-20">
      <shuzia-music-player />
    </div>
  </div>
</template>

<script>
import ShuziaNavigation from "@/Shuzia/Components/Navigation";
import ShuziaFooter from "@/Shuzia/Components/Footer";
import ShuziaMusicPlayer from "@/Shuzia/Components/MusicPlayer";
import EventListener from "@/songUtils/songEvent";
export default {
  components: {
    ShuziaNavigation,
    ShuziaFooter,
    ShuziaMusicPlayer,
    EventListener,
  },
};
</script>

然后导航组件有一个链接重定向到一个页面，该页面是一个名为 Show.vue 的组件。当在上面显示的父 App.vue 代码的 <slot><slot/> 标记中注入时，将显示此 Show.vue。

问题：

我的问题是，当用户通过单击导航选项卡导航到 Show.vue 组件时，我想将 Show.vue 中的数据传递到 App.vue 中的插槽内。视图。我该怎么做？提前致谢。

经过测试的方法。

1. 我已经通过导入 Show.vue 内部来使用 props 来接收数据作为 Show 中的子组件，但随后它在整个站点中都看不到。
2. 我还使用 this.$emit('customEventName', payload) 对自定义事件进行了测试，以便捕获/侦听父组件 (App.vue) 中的事件，但似乎没有任何效果。

再次提前致谢。