Vue如何实现iframe的上一步、下一步操作
作者：Houwe1
这篇文章主要介绍了Vue如何实现iframe的上一步、下一步操作，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
iframe的上一步、下一步操作
背景
使用Element的Tabs组件嵌入多页面，但是页面中需要实现上一步、下一步功能，如图：
实现
//父组件
var vm = new Vue({
el: "#app",
data: {
pages: [],
index: 0,
bmbiId: 0
},
methods: {
goPageIndex(pageIndex) {
this.index = pageIndex;
}
},
...
});
//在Vue实例外声明方法
function goPageIndex(tab) {
vm.goPageIndex(tab)
}
//子组件
<div style="text-align:center;margin:10px;">
<el-button type="primary" @@click="handleBack" size="mini">上一步</el-button>
<el-button type="primary" @@click="handleNext" size="mini">下一步</el-button>
</div>
//上一步
handleBack() {
window.parent.goPageIndex(1);
},
//下一步
handleNext() {
window.parent.goPageIndex(3);
}Vue使用iframe踩坑
需求
通过iframe写epub阅读器
由于src需要加密，所以在src拼接的时候直接调用函数获取参数
BUG
每次页面一动就会重新获取加载一次iframe，导致页面晃动
解决方案
把方法值赋值给变量，在src拼接中直接使用变量，而不是直接使用函数获取
心得
动态加载的数据，一般赋值给变量，而不要直接调取方法获取
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。