这个问题与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 中的插槽内。视图。我该怎么做?提前致谢。
经过测试的方法。
再次提前致谢。