vue 子页面调用父页面的参数_vue引入iframe的父子页面的数据传递

最新推荐文章于 2023-03-02 10:10:17 发布
最新推荐文章于 2023-03-02 10:10:17 发布
阅读量2.4k 收藏
点赞数
文章标签： vue 子页面调用父页面的参数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39744408/article/details/111863672
版权
本文介绍了一个Vue应用中，子页面如何调用父页面的参数并实现通过iframe进行父子页面间的数据传递。在父页面中，定义了`list`数组和`activeName2`等数据，并通过`phonea`方法设置`tokin`参数。子组件`iframe.vue`中，利用`mounted`钩子和`postMessage`方法进行跨域通信，尝试改变iframe的源地址并传递`assid`和`tokin`参数。
摘要由CSDN通过智能技术生成

父页面

{ {item.label}}

.block{margin:10px 0;

}.active{background:red;

}

exportdefault{

name:"show",

data() {return{

activeName2:0,

list: [

{ label:"用户管理", name:"first", id:1},

{ label:"配置管理", name:"second", id:2},

{ label:"角色管理", name:"third", id:3},

{ label:"定时任务补偿", name:"fourth", id:4}

],

assid:"1",

tokin:""};

},

components: {

iframeTab

},

created() {this.phonea();

},

methods: {

phonea() {

let phone= 678907890;this.tokin=phone;

},

btn(index){this.assid=index+1;this.activeName2=index

}

}

};

父页面的子组件

最低0.47元/天 解锁文章
weixin_39744408
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue 子页面调用父页面的参数_Vue子父组件间的数据传递
weixin_39842918的博客
12-22 3211
Vue组件间的作用域是独立的，不能相互之间调用数据，需要通过特定的方法进行数据的传递。一、父组件往子组件传递数据1、使用 Prop 传递数据组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据，我们需要通过子组件的 props 选项。注意：子组件标签中的属性不区分大小写，要通过中线的方式区分单词。props的值可以使数组，可以使对象...
vue项目使用 iframe 父子页面传值。
最新发布
weixin_45665171的博客
09-18 1440
vue项目使用 iframe 父子页面传值。
Vue中，iframe中的子网页，调用父网页的方法2
程先生的博客
06-28 461
　　这里有我原来写的文章：Vue中，iframe中的子网页，调用父网页的方法，这里面写了， 父子页面的调用。但是今天写的时候，遇到了下面的报错； Uncaught DOMException: Blocked a frame with origin "http://192.168.1.190:5500" from accessing a cross-origin frame. 阻止一个源为“...
iframe 中子页面调用父页面的Vue方法并正确传参
皮一下很开心的猴头
05-15 1万+
父页面的代码 html <div id="app"> //省略业务代码x行..... <iframe src="/sonpage" > //省略业务代码x行..... </div> vue var vm = new Vue({ el:'#app', data:{ }, mounted: function () { ...
Vue中子路由怎么调用父路由中的方法和参数
一片天空
04-22 5046
一、实现方式： 直接在子路由的范围内使用this.$parent.xx即可调用对应父亲路由的参数。 使用this.$parent.xx()即可调用对应父亲路由的方法 二、测试代码： 父页面： <template> <div class="parent-demo"> <div>这是父页面</div> <router-view></router-view> </div> </templat
【Vue】Vue父页面与iframe内嵌html子页面互调，传参问题
JeffHan^_^的博客
03-02 2463
记录一个开发过程中遇到的问题，Vue项目中嵌入了一个iframe，iframe里面的是一个html的页面，这时候想Vue和这个html之间来回互调传参，下面提供解决思路。 1.Vue调用iframe子页面中的方法 这里有一个index.html里面有这样的一些方法 <script> function ToFreeCameraFunc() { unityInstance.SendMessage("ROAM", "FreeCameraClick"); } functi
layer弹出层父子页面事件相互调用方法
10-18
父页面可能需要向子页面传递参数、执行子页面的方法，而子页面也可能需要通知父页面某些事件的发生或向父页面传递数据。在上述内容中，通过使用jQuery和layer插件实现了一个父页面通过点击链接打开layer弹出层，在弹...
vue中iframe子页面和父页面之间相互通信
mhydmx的博客
10-27 2071
vue中iframe子页面和父页面之间相互通信 问题 在实际的开发中遇到一个需求，就是iframe子页面需要调用父页面的方法，起初百度使用了*window.parent.vm*来调用父页面的方法，后来发现在iframe的纯html页面中根本取不到vm，遂推测应该是两个vue工程页面之间的调用可以用这个；接着又使用了*window.parent.getElementId('xxx')*，这种方法理论上来说应该是可行的，但是我懒且不喜欢这种调用方式，就没有深究，放弃了这种方法的尝试。所以找到了postMes
父子页面相互调用总结
05-28
在`showModelessDialog`中，父页面可以传递参数给子页面，并通过返回值实现通信。然而，由于其兼容性问题（不被其他现代浏览器支持），现在已经被广泛弃用，开发者应转向更通用的解决方案。 接着是`window.open`，...
frame之间以及子页面和父页面间参数传递
06-30
在jsp页面中，frame之间以及子页面和父页面间参数是如何传递的？
html的iframe跨域嵌套vue项目页面，使用postMessage的方法实现父子页面传值
qq_21382609的博客
10-29 1503
当前应用场景：u3d和前端项目对接，需要使用到前端的设置页面和详情功能，需要操作前端项目的方法，比如打开vue项目的弹窗，修改详情的数据等操作，当前记录的是修改vue页面的数据操作。vue项目使用技术：vue和less编写样式，html页面使用技术：html5和javascript 使用方案：postMessage的方法 vue向iframe发送数据的方法： sendMessage(data) { //子向父发送数据 window.parent.postMessage(
iframe调用父页面方法_VUE 项目中使用iframe及传值
weixin_39894255的博客
12-01 2227
最近做了一个这样的业务处理，在uniapp 项目中使用第三方页面，需要在当前的页面中把一些数据传给第三方，第三方处理后返回一些数据给当前页面，后续其他的操作会用到当前的数据。当前页面-发送数据(iframe页面)iframe 包括第三方地址把需要传递的数据拼接到url 地址处理参数，把参数字符串作为 URI 组件进行编码const query = { param1:'xx', param2:'d...
Vue中，iframe中的子网页，调用父网页的方法
程先生的博客
09-13 3034
iframe中的子网页，调用父网页的方法
iframe页面传值取值
大青虫的博客
03-02 1956
业务：目标界面的是用原生js写的 ， 被镶嵌到vue平台上 ， 现在要求vue点击跳转的时候 ，要附带上值 ，让原生界面获取到值 ， 完成页面设置查询。 想法 ： vue跳转，使用this.$route.query 传值取值 ， 取值后给原生html（iframe），传值 。 也就是“父（vue）传子（原生html） ” ， 子页面取值使用 千度大法 ： 1.子传父 ： 一 ：//根据iframe的id获取对象 ： vari1=window.frames['iframeId'...
【iframe】基于VUE项目，父子页面互传参数
qq_41306795的博客
10-14 1572
因为业务需求，现有A、B两个项目，需在A项目中的parent页面中，以iframe的形式，嵌入B项目的b页面。且两者需要互发消息，即互相传参。故有此文。另：如果条件允许，建议以MQTT的形式实现上述逻辑。
vue项目中iframe子页面调用父页面的方法
weixin_43734732的博客
03-31 6734
父页面的结构 <el-tab-pane label="派单流程" name="3"> <iframe ref='3' width="100%" height="480px" :src=dispatchUrl></iframe> </el-tab-pane> 父页面中的方法 methods: { ...
vue项目中，调用iframe子网页中的方法 和在iframe子页面中调用vue父页面中的方法。
热门推荐
SilenceJude的博客
11-08 1万+
目录描述一、vue项目调用iframe子页面中的方法。二、在iframe页面中，调用引用它的父页面中的方法。 一、vue项目调用iframe子页面中的方法。 父页面代码： <template> <div class="pjpccx"> <h1 class="title_color">{{ title }}</h1> <bu...
vue子页面向父页面传参数
08-31
在Vue中，子组件向父组件传递参数可以通过自定义事件的方式实现。以下是一个简单的示例： 在父组件中，可以通过`v-on`指令监听子组件触发的事件，并在对应的方法中处理传递的参数。例如： ```vue <template> <div> <h2>父组件</h2> <p>接收到的参数：{{ receivedParam }}</p> <child-component @child-event="handleChildEvent"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { receivedParam: '' } }, methods: { handleChildEvent(param) { this.receivedParam = param; } } } </script> ``` 在子组件中，可以使用`$emit`方法触发自定义事件，并传递参数给父组件。例如： ```vue <template> <div> <h3>子组件</h3> <button @click="sendParamToParent">向父组件传递参数</button> </div> </template> <script> export default { methods: { sendParamToParent() { const param = 'Hello, Parent!'; this.$emit('child-event', param); } } } </script> ``` 在父组件中，通过`@child-event`监听到子组件触发的事件，并在`handleChildEvent`方法中接收到子组件传递的参数。然后可以将参数赋值给父组件的数据，以便在模板中显示。 这样子组件就可以向父组件传递参数了。注意，在子组件中触发的事件名（`child-event`）需要与父组件中监听的事件名保持一致。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值