vue跨窗口通信之新窗口調(diào)用父窗口方法實(shí)例
眾所周知，在vue中bus等工具只能跨組件通信，如何實(shí)現(xiàn)跨窗口通信呢？
場(chǎng)景如下，我們?cè)贏窗口中新開(kāi)了B窗口，想在B窗口中調(diào)用A窗口的方法？
這里還總結(jié)了一點(diǎn)window事件的方法：
window.opener.location.reload() 這樣關(guān)閉B窗口后會(huì)刷新整個(gè)A窗口，體驗(yàn)效果不是很好
window.onunload 在關(guān)閉窗口之后觸發(fā)
window.opener 獲取父頁(yè)面的window元素
注：
1.window.opener 實(shí)際上就是通過(guò)window.open()打開(kāi)的窗體的父窗體
2.window.opener.父頁(yè)面中的方法();//調(diào)用父頁(yè)面中的方法
location.reload() 刷新頁(yè)面
window.close() 關(guān)閉window.open()打開(kāi)的窗口
window.onbeforeunload 關(guān)閉窗口前執(zhí)行事件
A窗口：
mounted() {
// 注：getBpageList是提供給新窗口B觸發(fā)的，實(shí)際上觸發(fā)的是A的getApageList方法
window["getBpageList"] = (params) => {
this.getApageLists(params);
};
methods: {
async getApageLists(){
let res = await getPageList()
......
},
//點(diǎn)擊新打開(kāi)一個(gè)窗口B
detailsView(data) {
window.open(`....../${data.id}`);
},
}
b窗口調(diào)用A窗口方法
注：具體場(chǎng)景可以很多，比如放在點(diǎn)擊事件中，或者關(guān)閉窗口前等
methods:{
emitAwindow(){
//window.opener 獲取父頁(yè)面的window元素
//判斷A窗口有沒(méi)有window.opener和getBpageList是不是個(gè)方法
if (window.opener && window.opener.getBpageList) {
window.opener.getBpageList(params);
} else {
//window.opener.frames[0] 獲取到的window對(duì)象
window.opener.frames[0].getBpageList(params);
}
}
}
總結(jié)
到此這篇關(guān)于vue跨窗口通信之新窗口調(diào)用父窗口的文章就介紹到這了,更多相關(guān)vue新窗口調(diào)用父窗口內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue+Canvas繪圖的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue中的eventBus會(huì)不會(huì)產(chǎn)生內(nèi)存泄漏你知道嗎
這篇文章主要為大家詳細(xì)介紹了vue中的eventBus會(huì)不會(huì)產(chǎn)生內(nèi)存泄漏，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-02-02
這篇文章主要介紹了Vue.js $refs用法案例詳解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
Vue3組件掛載之創(chuàng)建組件實(shí)例詳解
這篇文章主要為大家介紹了Vue3組件掛載之創(chuàng)建組件實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
這篇文章主要給大家介紹了關(guān)于vue中路由傳參以及跨組件傳參的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
解決Vue數(shù)據(jù)更新了但頁(yè)面沒(méi)有更新的問(wèn)題
在vue項(xiàng)目中,有些我們會(huì)遇到修改完數(shù)據(jù),但是視圖卻沒(méi)有更新的情況,具體的場(chǎng)景不一樣,解決問(wèn)題的方法也不一樣,在網(wǎng)上看了很多文章,在此總結(jié)匯總一下,需要的朋友可以參考下2023-08-08
基于Vue3實(shí)現(xiàn)掃碼槍掃碼并生成二維碼實(shí)例代碼
vue3生成二維碼的方式有很多種,下面這篇文章主要給大家介紹了關(guān)于如何基于Vue3實(shí)現(xiàn)掃碼槍掃碼并生成二維碼的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
Vue.js 父子組件通訊開(kāi)發(fā)實(shí)例
這篇文章主要介紹了Vue.js 父子組件通訊開(kāi)發(fā)實(shí)例的相關(guān)資料,本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-09-09
本篇文章主要介紹了vuex 閑置狀態(tài)重置方案，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
window.onresize在vue中只能使用一次,自適應(yīng)resize報(bào)錯(cuò)問(wèn)題
這篇文章主要介紹了window.onresize在vue中只能使用一次,自適應(yīng)resize報(bào)錯(cuò)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10