message

我想着不用接收父组件传过来的showToastText，直接使用Toast组件里的showToastText，逻辑上感觉也走的通，但是我试了下，不行，一定要父传子，不明白为什么一定要父传子

<template>
    <div class="toast">
        {{showToastText}}
    </div>
</template>
<script>
import { reactive,toRefs } from 'vue';
export const useToastEffect=()=>{
    const toastData=reactive({
        showToast:false,
        showToastText:''
    })
    const toastFn=(meg)=>{
        toastData.showToast=true;
        toastData.showToastText=meg;
        setTimeout(()=>{
            toastData.showToast=false;
            toastData.showToastText='';
        },2000)
    }
    const {showToast,showToastText}=toRefs(toastData);
    return {showToast,showToastText,toastFn}
}
export default {
    name:'Toast',
    setup(){
        const {showToastText}=useToastEffect();
        return {showToastText}
    }
}

</script>
<style lang="scss" scoped>
@import "../style/variables.scss";
.toast{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    padding: .1rem;
    background: rgba(0, 0, 0, .35);
    border-radius: .05rem;
    color: $color-white;
}
</style>