vue跨窗口通信之新窗口調(diào)用父窗口方法實例
眾所周知，在vue中bus等工具只能跨組件通信，如何實現(xiàn)跨窗口通信呢？
場景如下，我們在A窗口中新開了B窗口，想在B窗口中調(diào)用A窗口的方法？
這里還總結(jié)了一點window事件的方法：
window.opener.location.reload() 這樣關(guān)閉B窗口后會刷新整個A窗口，體驗效果不是很好
window.onunload 在關(guān)閉窗口之后觸發(fā)
window.opener 獲取父頁面的window元素
注：
1.window.opener 實際上就是通過window.open()打開的窗體的父窗體
2.window.opener.父頁面中的方法();//調(diào)用父頁面中的方法
location.reload() 刷新頁面
window.close() 關(guān)閉window.open()打開的窗口
window.onbeforeunload 關(guān)閉窗口前執(zhí)行事件
A窗口：
mounted() {
// 注：getBpageList是提供給新窗口B觸發(fā)的，實際上觸發(fā)的是A的getApageList方法
window["getBpageList"] = (params) => {
this.getApageLists(params);
};
methods: {
async getApageLists(){
let res = await getPageList()
......
},
//點擊新打開一個窗口B
detailsView(data) {
window.open(`....../${data.id}`);
},
}
b窗口調(diào)用A窗口方法
注：具體場景可以很多，比如放在點擊事件中，或者關(guān)閉窗口前等
methods:{
emitAwindow(){
//window.opener 獲取父頁面的window元素
//判斷A窗口有沒有window.opener和getBpageList是不是個方法
if (window.opener && window.opener.getBpageList) {
window.opener.getBpageList(params);
} else {
//window.opener.frames[0] 獲取到的window對象
window.opener.frames[0].getBpageList(params);
}
}
}
總結(jié)
到此這篇關(guān)于vue跨窗口通信之新窗口調(diào)用父窗口的文章就介紹到這了,更多相關(guān)vue新窗口調(diào)用父窗口內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue3+ts+vant移動端H5項目搭建的實現(xiàn)步驟
本文主要介紹了vue3+ts+vant移動端H5項目搭建，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-06-06
這篇文章主要介紹了vue將文件/圖片批量打包下載zip的教程，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
解決element-ui?el-drawer抽屜el-dialog彈框關(guān)閉優(yōu)化demo
這篇文章主要為大家介紹了解決element-ui?el-drawer抽屜el-dialog彈框關(guān)閉優(yōu)化demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪<BR>2023-06-06
vue項目啟動出現(xiàn)cannot GET /服務(wù)錯誤的解決方法
這篇文章主要介紹了vue項目啟動出現(xiàn)cannot GET /服務(wù)錯誤的解決方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-04-04
這篇文章主要為大家詳細介紹了vue實現(xiàn)秒殺倒計時組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
Element樹形控件el-tree實現(xiàn)一鍵全選、反選功能
最近做的項目用到了全選全不選功能,于是就自己動手寫了一個,這篇文章主要給大家介紹了關(guān)于Element樹形控件el-tree實現(xiàn)一鍵全選、反選功能的相關(guān)資料,需要的朋友可以參考下2023-10-10
這篇文章主要為大家詳細介紹了vue實現(xiàn)伸縮菜單功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
vue3?element?plus按需引入最優(yōu)雅的用法實例
這篇文章主要給大家介紹了關(guān)于vue3?element?plus按需引入最優(yōu)雅的用法,以及關(guān)于Element-plus按需引入的一些坑,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2022-03-03
ElementUI 修改默認樣式的幾種辦法(小結(jié))
這篇文章主要介紹了ElementUI 修改默認樣式的幾種辦法(小結(jié))，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-07-07
公司內(nèi)部一直有大屏的需求,也一直再做,中途也踩了一些坑,但是沒有認真的來總結(jié)下,下面這篇文章主要給大家介紹了關(guān)于如何在vue項目中使用rem布局的相關(guān)資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2023-02-02