由于要使用之前項目使用的頁面，需要從非vue iframe子頁面調用vue項目
1.父頁面

<iframe :src="value.urlPath" frameborder="0" width="900px" height="500px"></iframe>methods: {add(type,name,url){//console.log("父頁面方法實現");}, handleMessage (event) {const data = event.data.data;if(data !== undefined){if(data.code === "success"){console.log("子頁面傳來------")console.log(data.data);this.add(data.data.type,data.data.name,data.data.url);}}},},mounted() {window.addEventListener('message', this.handleMessage);},

子頁面

<button onclick="addstruct()">添加快捷項</button><script>function addstruct(){console.log("點擊");// 向父vue頁面發送信息window.parent.postMessage({data: {code:"success",data:{type:'0',name:'百度',url:'https://www.baidu.com/s?wd=abc'}}}, '*');}</script>

這樣就可以實現非vue子頁面調用vue父頁面方法

總結

以上是生活随笔為你收集整理的非vue子页面 调用vue父页面方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。