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)文章
這篇文章主要介紹了Vue+Canvas繪圖的使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
vue中的eventBus會不會產(chǎn)生內(nèi)存泄漏你知道嗎
這篇文章主要為大家詳細(xì)介紹了vue中的eventBus會不會產(chǎn)生內(nèi)存泄漏，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
這篇文章主要介紹了Vue.js $refs用法案例詳解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
這篇文章主要為大家介紹了Vue3組件掛載之創(chuàng)建組件實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
這篇文章主要給大家介紹了關(guān)于vue中路由傳參以及跨組件傳參的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
在vue項目中,有些我們會遇到修改完數(shù)據(jù),但是視圖卻沒有更新的情況,具體的場景不一樣,解決問題的方法也不一樣,在網(wǎng)上看了很多文章,在此總結(jié)匯總一下,需要的朋友可以參考下2023-08-08
vue3生成二維碼的方式有很多種,下面這篇文章主要給大家介紹了關(guān)于如何基于Vue3實現(xiàn)掃碼槍掃碼并生成二維碼的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
這篇文章主要介紹了Vue.js 父子組件通訊開發(fā)實例的相關(guān)資料,本文介紹的非常詳細(xì)，具有參考借鑒價值，需要的朋友可以參考下2016-09-09
本篇文章主要介紹了vuex 閑置狀態(tài)重置方案，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
window.onresize在vue中只能使用一次,自適應(yīng)resize報錯問題
這篇文章主要介紹了window.onresize在vue中只能使用一次,自適應(yīng)resize報錯問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10