父组件
父组件用的vue2
<template>
<div>
<iframe src="http://192.168.9.94:3000" ref="iframe" ></iframe>
</div>
</template>
<script>
export default {
data () {
return {
}
},
mounted () {
window.addEventListener('message', this.handleMessage) // 监听iframe的事件
},
methods: {
handleMessage (event) {
console.log('handleMessage', event)
if (event.data === 'getParams') {
this.sendMessage()
}
},
sendMessage () {
this.$refs.iframe.contentWindow.postMessage({
cmd: 'getParams', // cmd 用来判断触发的是什么事件
params: {
token: localStorage.getItem('authData')
}
}, '*')
}
}
}
</script>
子iframe
子组件用的vue3
onMounted(() => {
// 初始化
console.log('初始化向父组件要参')
parent.window.postMessage("getParams", '*');
// 接受父页面发来的信息
window.addEventListener('message', (event) => {
// console.log(event)
let data = event.data
console.log(data)
switch (data.cmd) {
case 'getParams':
console.log('public data', data)
break
}
})
})