vue组件和iframe之间的传值-传值总结

最新推荐文章于 2024-05-13 13:33:11 发布
最新推荐文章于 2024-05-13 13:33:11 发布
阅读量2.5k 收藏 11
点赞数 4
分类专栏： vue javascript 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37949984/article/details/108665535
版权
本文记录了在项目中使用Vue组件与iframe进行交互的传值过程，包括Vue组件如何传递值，接收值，以及iframe如何将值传递给Vue组件和从Vue组件接收值，对于使用iframe集成外部插件的情况具有参考价值。
摘要由CSDN通过智能技术生成

前情提要：由于项目需要，我需要引入一个报表的插件。插件只能使用html的方式调用。
所以,我把插件的使用封装了一个html页面,vue项目则利用iframe的方式引入。
在项目进行过程中，需要iframe和vue组件之间的传值。暂时做个笔记。

vue组件传值：

 <el-main>
        <iframe
          id="mainIframe"
          ref="mainIframe"
最低0.47元/天 解锁文章
凌晨の麋鹿
关注
  • 4
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 给iframe设置src_vue项目iframe的传值问题
weixin_39625162的博客
12-19 1731
前言项目需要，我需要引入一个已经封装好的浏览器插件。插件只能以html的方式调用，所以。我把插件的使用封装了一个html页面。vue项目则利用iframe的方式引入。到这里我就遇到了一个问题，那就是vue项目中iframe的传值问题，这里做个笔记防止之后忘记，如果有其他的方式，欢迎大家交流，不胜感激。正文先写几个简易的demo需要用到的html测试damo请使用支持javascript的浏览器12...
vue2.0项目中组件和iframe之间如何传值
MISS_zhang_0110的博客
10-24 478
【代码】vue2.0项目中组件和iframe之间如何传值。
iframe 与 h5 或 其他vue页面传值，详解传递参数的方法和技巧
sun_jinlin的博客
05-13 2337
在网页开发中，我们经常会使用iframe标签来嵌入其他网页或者文档。而iframe传值则是指在嵌入的iframe中传递参数的一种技术。通过传递参数，我们可以在嵌入的iframe中获取到父页面传递过来的数据，从而实现不同页面之间的数据交互。
vue组件和iframe之间的传值
meimeib的博客
11-30 1170
https://blog.csdn.net/qq_37949984/article/details/108665535
vue和iframe传值
weixin_60041868的博客
10-15 881
【代码】vue和iframe传值。
vue中嵌套iframe进行传值
weixin_42119356的博客
04-19 710
vue中嵌套iframe进行传值 子传父 子组件传值 // 在methods中定义一个方法，写在方法里 window.parent.postMessage({ cmd: 'returnInfo', params: { info: '爸~隔壁李阿姨找你给她修冰箱' } }, '*') 父组件接收 // mounted 生命周期中定义监听 mounted() { window.addEventListener("message
vue项目使用 iframe 父子页面传值。
weixin_45665171的博客
09-18 1038
vue项目使用 iframe 父子页面传值。
vue组件和iframe页面的相互传参
阿飞的博客
03-22 3699
vue组件和iframe页面的相互传参
vue项目iframe的传值问题
weixin_42718460的博客
11-20 2477
前言 　　项目需要，我需要引入一个已经封装好的浏览器插件。插件只能以html的方式调用， 　　所以。我把插件的使用封装了一个html页面。vue项目则利用iframe的方式引入。 　　到这里我就遇到了一个问题，那就是vue项目中iframe的传值问题，这里做个笔记防止之后忘记， 　　如果有其他的方式，欢迎大家交流，不胜感激。 正文 　　先写几个简易的demo 　　需要用到的html &...
VUE+内置iframe传值失效问题解决
qq_38295468的博客
03-08 734
公司业务需要计算建筑物截收面积，然后我采用的是openCV来计算，在vue内部引用不了，然后就采用了iframe原生html来完成；功能实现了我想让iframe和vue通信；然后用原有方式试了多次都失败了，iframe传值可以但是拿取vue父级传递的数据总是undefined；
vue组件间的传值-小案例
07-06
在Vue.js框架中，组件是构建用户界面的基本单元，它们可以独立地管理和更新各自的视图。组件间的通信是实现复杂应用交互的关键。本教程通过几个小案例，详细讲解了Vue中父组件向子组件传递数据、子组件向父组件回传...
深入理解Vue 组件之间传值
10-18
本文将深入探讨Vue组件间的数据传递，包括父组件向子组件传递数据、子组件向父组件传递数据以及子组件之间的间接通信。 一、父组件向子组件传递数据 Vue中，最常用的数据传递方式是通过props（属性）。在子组件中...
vue实现组件之间传值功能示例
10-18
总结来说，Vue组件之间的数据传递主要包括以下几种方式： 1. 父组件通过`props`向子组件传递数据。 2. 子组件通过触发事件并向事件携带数据来向父组件传递信息。 3. 使用`slots`允许父组件向子组件插入动态内容。 ...
详解vue 组件之间使用eventbus传值
08-29
Vue 组件之间使用 EventBus 传值 在 Vue 组件之间传递数据是一种常见的需求，vuex 是一个非常流行的解决方案，但是对于小型项目或者简单的数据传递，使用 Vuex 可能会显得过于复杂。这时，使用 EventBus 就是一个...
Vue和React组件之间的传值方式详解
10-17
组件间的通信是构建复杂应用的关键，本文将详细介绍Vue和React组件之间如何传递值。 在Vue框架中，组件间传值主要有以下几种方式： 1. **父子组件通信**： - **父->子**：通过`props`属性将数据传递给子组件。父...
Vue+elementui搭建开发环境
qq_37949984的博客
06-06 443
Vue+elementui搭建开发环境 1.检查本地是否安装node： node -v 如果没有安装从node官网上下载相应的node，安装成功即可。 2.检查本地npm版本：npm -v，如果版本太低可以通过： npm install -g npm 进行升级 3.全局安装webpack： npm install webpack -g 4.安装vue脚手架： npm install vue-c...
数理方法习题 前六章.pdf
08-03
数理方法习题 前六章
某大型制造企业IT蓝图规划及实施路线.pptx
最新发布
08-03
某大型制造企业IT蓝图规划及实施路线.pptx
vue组件v-model传值
08-22
- *1* [Vue——父子组件通过v-model传值和显示](https://blog.csdn.net/weixin_42247720/article/details/127650801)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值