将数据传递到vuejs中的全局组件

这是我关于stackoverflow的第一个问题 . 请随时告诉我是否需要编辑它 .

我创建了全局组件，名为Popup.vue

<div class="popup-background" id="vue-popup" @click.self="$emit('close')">
    <div class="popup-info-box" :class="customClasses" :style="infoBoxPosition()">            
        <slot></slot>
    </div>
</div>

<script>
export default {
    props : {
        customClasses : {
            default : () => '',
        },
    },
    data() {
        return {
            hasMounted : false,
        }
    },
    methods : {
        infoBoxPosition() {
            if( !this.hasMounted ) {
                return { 'right' : '0px', 'top' : '0px' };
            }

            let parent = document.querySelector('#vue-popup').parentElement;
            let bounds = parent.getBoundingClientRect();

            return { 'right' : ( document.body.clientWidth - bounds.right ) + 'px', 'top' : bounds.bottom + 'px' };
        }
    },
    mounted() {
        this.hasMounted = true;
    },
}

Current behaviour

我直接从我的过滤器组件将html传递给我的Popup.vue组件 .

Example ：Filter.vue

<div class="menu" v-for="( filter, key ) in filters">
        <div class="filter-button" @click="openMenu( key )">
            <span>
                {{ $t(`filters.${key}`) }}
            </span>
        </div>
        <transition name="fade">
            <Popup :customClasses="{ 'filter-menu' : filter.hide }" v-show="getActiveMenu == key" @close="toggleMenu( '' )">
                <div class="filter-menu-top">
                    <div>
                        {{ filter.values.min }}
                    </div>
                    <div>
                        {{ filter.values.max }}
                    </div>
                </div>
                <div class="filter-menu-bottom">
                    <div class="filter-action-button apply" @click="applyFilter( filter, key )">
                        {{ $t(`filters.actions.apply`) }}
                    </div>
                </div>
            </Popup>
        </transition>
    </div>

Problem

我已将Popup.vue注册为全局组件，现在我可以在其他所有组件中使用它而无需导入它 . 那很好，但我有另一个问题 .

我想动态更改Popup.vue的内容 . 例如，当用户单击过滤器按钮时，他应该在弹出窗口中看到过滤器菜单 . 当用户点击进入时，他会在弹出窗口中看到登录表单，依此类推 .

Popup.vue应该是非常通用的，我想在任何需要删除行为的地方使用它 . 如何在不使用每个组件的模板的情况下管理Popup的内容？

Desired solution

将Popup.vue组件放入App.vue组件并管理任何组件的弹出内容的方法，而不是将弹出窗口放在我需要的每个组件中 .

Thoughts

我想过使用Vuex并在每个组件中绑定一些动作，将模板作为字符串发送到Vuex状态，并在我的Popup.vue组件中读取它 . 但它似乎是不可靠和不可扩展的解决方案 .

提前致谢 .