vue中嵌套iframe进行传值

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.params.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
    }
  }