由于要使用之前项目使用的页面,需要从非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父页面方法