非vue子页面 调用vue父页面方法

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