父组件向子组件iframe传值

//父组件

<iframe id="mainIframe" ref="mainIframe" name="mainIframe" :src="url" highlight-current="true"
frameborder="0" width="100%" height="100%"></iframe>

//向iframe传值
sendDataToIframe() {
let data ='传递的数据';
const mapFrame = this.$refs['mainIframe'];
mapFrame.onload = function () {
const iframeWin = mapFrame.contentWindow
iframeWin.postMessage({
value: data,
}, '*')
}
},

 

//子组件

/**
* 接收获取外面框架传到iframe里的值
* */
getIframeData() {
window.addEventListener('message', messageEvent => {
if (messageEvent.source != window.parent) return;
console.log('子收到messageEvent：', messageEvent);
console.log('子收到vue的数据：', messageEvent.data);
}
)
},