vue怎么嵌入一个iframe,vue使用iframe跳转别的页面

　　本文主要介绍Vue如何实现iframe的上一步和下一步操作，有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。

目录

　　 iframe的上一次和下一次操作背景：Vue使用iframe踩坑解决BUG的体会

iframe的上一步、下一步操作

背景

　　使用元素的Tabs组件嵌入多个页面，但是需要在页面中实现previous和next功能，如图所示：

实现

　　//父组件

　　var vm=new Vue({

　　埃尔： #app ，

　　数据：{

　　页数：[]，

　　指数：0，

　　bmb id:0

　　},

　　方法：{

　　goPageIndex(pageIndex) {

　　this.index=pageIndex

　　}

　　},

　　.

　　});

　　//在Vue实例外部声明方法

　　函数goPageIndex(tab) {

　　vm.goPageIndex(选项卡)

　　}

　　//子组件

　　div style= text-align:center；边距：10px

　　El-button type= primary @ @ click= handle back size= mini back/El-button

　　El按钮type= primary @ @ click= handle next size= mini next/El按钮

　　/div

　　//上一步

　　handleBack() {

　　window . parent . gopageindex(1)；

　　},

　　//下一步

　　handleNext() {

　　window . parent . gopageindex(3)；

　　}

Vue使用iframe踩坑

需求

　　通过iframe编写epub阅读器

　　因为src需要加密，所以src拼接时直接调用函数获取参数。

BUG

　　每次页面移动时，iframe都会被检索并再次加载，导致页面抖动。

解决方案

　　将方法值赋给变量，在src拼接中直接使用变量而不是直接使用函数获取。

心得

　　动态加载的数据一般赋给变量，而不是直接调用方法来获取。

　　以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。