在Vue2中怎么实现iframe跳转,使用全局事件总线
时间: 2024-05-14 11:15:36 浏览: 14
在Vue2中使用全局事件总线实现iframe跳转的方法如下:
1. 在main.js中创建全局事件总线:
```
import Vue from 'vue'
export const eventBus = new Vue()
```
2. 在需要跳转的组件中创建iframe,并绑定一个事件监听器:
```
<template>
<div>
<iframe ref="myIframe" @load="onIframeLoad"></iframe>
</div>
</template>
<script>
import { eventBus } from '@/main.js'
export default {
methods: {
onIframeLoad() {
// iframe加载完成后,向事件总线发送消息
eventBus.$emit('iframe-loaded')
}
}
}
</script>
```
3. 在需要接收跳转事件的组件中,使用事件总线监听iframe-loaded事件,并更新路由:
```
<script>
import { eventBus } from '@/main.js'
export default {
mounted() {
// 监听iframe-loaded事件
eventBus.$on('iframe-loaded', () => {
// 更新路由
this.$router.push('/new-page')
})
}
}
</script>
```
通过以上步骤,就可以在Vue2中使用全局事件总线实现iframe跳转了。