Javascript 将数据传递到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>

导出默认值{
道具：{
自定义类别：{
默认值：（）=>“”，
},
},
数据（）{
返回{
哈斯：错，
}
},
方法：{
infoBoxPosition（）{
如果（！this.hasMounted）{
返回{'right'：'0px'，'top'：'0px'}；
}
让parent=document.querySelector（“#vue popup”）.parentElement；
让bounds=parent.getBoundingClientRect（）；
返回{'right'：（document.body.clientWidth-bounds.right）+'px'，'top'：bounds.bottom+'px'}；
}
},
安装的（）{
this.hasMounted=true；
},
}

当前行为

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

示例：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>

{{$t（`filters.${key}`）}
{{filter.values.min}
{{filter.values.max}
{{$t（`filters.actions.apply`）}

问题

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

我想动态更改Popup.vue的内容。例如，当用户单击filter按钮时，他应该会在弹出窗口中看到filter菜单。当用户单击sing in时，他会在弹出窗口中看到signin表单，以此类推

vue应该是非常通用的，我想在任何需要下拉行为的地方都使用它。我如何管理弹出窗口的内容，而不在每个组件的模板中使用它

所需解决方案

在我的App.vue组件中放置Popup.vue组件，并管理任何组件中的弹出内容，而无需在我需要的每个组件中放置我的弹出窗口

思想

我考虑使用Vuex并在每个组件中绑定一些操作，将模板作为字符串发送到Vuex状态，并在我的Popup.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>