需求是在一个vue中内嵌一个聊天窗口,需要使用iframe进行传值交互,现将传值方法总结如下:
子传父
子组件传值
// 在methods中定义一个方法,写在方法里
window.parent.postMessage({
cmd: 'returnInfo',
params: {
info: '爸~隔壁王阿姨找你过去给她修电视'
}
}, '*')
父组件接收
// mounted 生命周期中定义监听
mounted() {
window.addEventListener("message", this.handleMessage)
}
// 同样在methods中定义一个方法
handleMessage (event) {
var data = event.data;
switch (data.cmd) {
case 'returnInfo':
this.info = data.info
break
}
}
父传子
父组件传值
// 在methods中定义方法
sendMessage () {
const iframe = this.$refs.iframe.contentWindow
iframe.postMessage({
cmd: 'returnInfo',
params: {
info: '嘘~小点声别让你妈听到'
}
}, '*');
}
子组件接收
// mounted 生命周期中定义监听
mounted() {
window.addEventListener("message", this.handleMessageFromParent)
}
// 在methods中定义方法
handleMessageFromParent (event) {
var data = event.data;
switch (data.cmd) {
case 'returnInfo':
this.info = data.params.info
break
}
}