Iframe-01

1.父子父子之间交互方法1

        a)父界面

<template>
<div class="page">             
   <el-button  @click="parentClick">父界面点击事件</el-button>
   <iframe id="myFrame" :src="frameSrc"></iframe> 
 </div>
</template>
<script>
export default { 
   methods: {
      parentClick(){     
          console.log('父界面点击方法执行')
       }
  },
  mounted () {
      // 将methods 里面的方法 注册成 window 方法
      const that = this
      window.parentClick= () => {
            that.parentClick()
      }
  }
}

</script>

b) 子界面 就是被iframe 加载的界面

<template>
<div class="page-sub">             
        <el-button  @click="childClick">子界面点击事件</el-button>
 </div>
</template>
<script>
export default { 
    methods: {
        childClick(){     
            console.log('子界面点击方法执行')
            // 此处 触发 methods 里的parentClick() 方法 , 是通过 已经注册的
            // window 的 parentClick()方法
            parent.parentClick()
         }
  }
}
</script>

总结：

           iframe 所加载的界面是子界面，在子界面触发 父界面方法，是通过 在父界面 将父界面方法注册成window的对应的方法，并在 子界面 通过 parent.【注册的方法名】 来调用。