VUE父页面调用子页面方式

最新推荐文章于 2024-05-23 17:34:08 发布
最新推荐文章于 2024-05-23 17:34:08 发布
阅读量1.4w 收藏 7
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42143155/article/details/103693567
版权

本人新接触VUE 在写项目的时候需要父页面来调用子页面的方法 

在网上查了资料后解决了问题  分享出来 希望可以帮助和我一样的萌新

上图是在父页面中引用了子页面

第一步 我们需要在标签上添加ref

最后一步  在需要调用子页面方法的地方调用即可

this.$refs.定义好的ref名称.需要调用的方法名称

希望能够帮助大家   让我们一起学习 一起进步！

沐枫丶
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue多个页面路由传参,浏览器回退,页面判断由前一个页面跳转就使用新数据还是其他页面就使用缓存，钩子函数
weixin_45498171的博客
03-25 1337
1.在App.vue里面使用keep-alive <keep-alive> <router-view v-if="$route.meta.keepAlive"> <!-- 这里是会被缓存的视图组件，比如 page1,page2 --> </router-view> </keep-alive> <router...
点击按钮打开子页面，实现父子页面相互传值，再次点击回显子页面保存的数据
MatchlessHreo的博客
01-08 1001
效果图（登录为保存的意思） 1.点击按钮打开子页面 js代码（打开页面如果隐藏域有值就回显在子页面上） /** * 打开银行信息页面 * */ InputInfoDlg.openAddBankInfo = function () { var bankArr = []; var bankjsonstr = $('#bankinfo').val(); if(ba...
vue父页面调用子页面及方法及传参，鼠标光标定位
路飞船长的博客
12-28 3342
vue父页面调用子页面及方法，鼠标光标定位
Vue3:动态路由+子页面(新增、详情页)动态路由配置(代码全注释)
最新发布
qq_45061461的博客
05-23 1541
emm，项目中使用动态路由实现根据后端返回的用户详情信息，动态将该用户能够访问的页面信息，动态生成并且绑定到路由对象中。但是后端返回的不包含像是页面详情页，新增页的权限路由，如果前端在路由对象中写死的话，那每次进入页面都得判断是否将进入一个用户没有权限的页面，但是路由中有存在的。3.GetPossibleDetails 根据传递过来的信息，筛选出存在权限的数据， 转换成路由信息,因为如果在本地中已经定义了全部的页面新增，详情，编辑等页面，但是咱们还是需要根据后端返回的权限中，判断咱们是否注册该页面的路由。
vue 父级页面调用子级页面
weixin_60170500的博客
11-21 718
是一个布尔类型的prop，它没有默认值，必须由父组件提供。这样，父组件可以监听并响应这个事件，在这里是关闭一个微信申请详情信息。的子组件的数据属性。子组件将能够访问和操作这个属性，以便在父组件和子组件之间共享数据。是一个数组类型的prop，其默认值为空函数。此外，定义了一个验证器函数，它确保。是组件接收的数据，它允许你声明父组件传递的属性的类型和默认值。触发了一个名为'visible'的事件，并传递了新的。的值是非空的，或者它是null或undefined。当这个方法被调用时，它会向父组件发送一个名为。
Vue父子组件/页面相互传值方法具体场景应用（$refs props $emit）
qq_42751248的博客
05-21 1107
业务需求分析：用户在某个模块试卷答完需要交卷时，点击当前页面交卷按钮，弹出层展示，弹出层上需能显示该试卷还剩余的时分秒，并有可供用户选择的 “否” 和 “是” 按钮，如果用户点击“否”，则不提交答卷，且弹出层隐藏，并停留在原页面；如果用户点击“是”，则提交答卷记录，且弹出层隐藏，并跳转到该模块的成绩单页。 页面效果展示如下： 页面结构分析：有交卷按钮的页面为父页面，子页面是弹出层页面，是嵌套在父页面上的，行业术语为：父组件引入子组件。 技术点分析： a(父传子).由于是某个模块的答卷，且成功提交
Web前端Vue判断是否是首次进入页面
qq_39279164的博客
08-10 5074
方法一 mounted钩子函数中写 如果window.name值为空就证明为首次加载，反之则不是 if (window.name === '') { console.log('页面首次被加载') } else { // 这里可以写调用什么方法 console.log('页面被刷新') } } 方法二 created钩子函数中写 判断方式1 如果页面刷新的话window.performance.navigation.type的值为1，如果值不是1就
vue 父组件调用子组件方法及事件
08-27
在 Vue 中，还有另一种方式可以实现父组件调用子组件事件，即使用 `$emit` 方法在子组件中发出事件，然后在父组件中使用 `$on` 方法来监听事件。 例如，在上面的例子中，我们可以在子组件中定义 `callMethod` 方法...
iframe子父页面调用js函数示例
10-26
本文将详细介绍如何实现`iframe`子页面调用父页面的函数，以及父页面调用子页面的函数。 1. **iframe子页面调用父页面的函数** 在子页面中，通过`window.parent`属性，我们可以访问到父页面的全局作用域。如果要...
使用Vue实现调用接口加载页面初始数据
10-16
今天小编就为大家分享一篇使用Vue实现调用接口加载页面初始数据，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue父组件触发事件改变子组件的值的方法实例详解
10-17
4. **使用$refs直接访问子组件方法**：在某些情况下，父组件可能需要直接调用子组件的方法来改变其内部状态。首先，在父组件模板中为子组件添加ref属性，如`<ChildComponent ref="childRef">`，然后在父组件的`...
模态窗口使用介绍
tianshijava的博客
01-06 185
[size=medium]打开模态窗口 window.showModalDialog(url,window, feature); 参数说明:url 要访问的路径 如 var url = "xuanzedbtableAction.action window feature 窗口特性 如var feature = "dialogWidth:600px;dial...
Vue组件实例间的直接访问
weixin_33939380的博客
08-19 172
前面的话 　　有时候需要父组件访问子组件，子组件访问父组件，或者是子组件访问根组件。 在组件实例中，Vue提供了相应的属性，包括$parent、$children、$refs和$root，这些属性都挂载在组件的this上。本文将详细介绍Vue组件实例间的直接访问   $parent 　　$parent表示父组件的实例，该属性只读 　　下面是一个简易实例 &lt;div id="ex...
判断进入vue页面时,是第一次进入还是重新加载进入
weixin_49186680的博客
04-28 2507
created() {}, mounted() { if (window.performance.navigation.type == 1) { console.log("页面被刷新"); } else { console.log("首次被加载"); window.location.reload(); } }, methods: {} performance.navigation.type（该属性返回一个整数值...
vue实现判断页面是否第一次进入
weixin_55562256的博客
10-20 391
在vue组件挂载时，给当前窗口命名，如果当前窗口name为空，是第一次，否则不是。
vue 判断页面是首次进入还是再次刷新
dreamy_wx的博客
05-09 1840
需求： 默认打开页面请求相应的接口，执行任务 当页面刷新时则代表放弃该任务，请求新的任务进行执行 created(){ //刷新页面代表放弃任务 let refreshNumsValue //判断页面是否含有缓存，有则代表再次刷新，无则代表首次进入页面 if(localStorage.getItem("refreshNums")){ refreshNumsValue = Number(localStorage.getItem("refreshNums"));.
vue各页面/组件之间通信
一个有节操的码农
03-05 2816
一、通过sessionStorage 在A页面中，点击事件中，通过sessionStorage存入一个key 在B页面中，页面显示就会触发的函数里判断是否有这个key，如果有就执行相应的动作并删掉这个key 二、通过Vue.prototype挂载一个全局的对象 在main.js中定义 Vue.prototype.$EventBus = new Vue() 在B页面中，页面加载函数里，定义一个监听事件 this.$EventBus.$on("switchTab",(val)=>{ }) 在A页
vue判断是从哪个页面跳转过来的
qq_53561431的博客
07-21 7748
vue判断是从哪个页面跳转过来的
vue 判断页面是首次加载还是刷新
weixin_46350343的博客
01-22 1689
在mounted事件里面进行判断 window.name 如果window.name为空的话 视为首次加载页面 当我们给window.name赋值isReload 当我们刷新页面如何有这个值就视为刷新页面 当我们离开页面是要把我们付给window.name的值给清空beforeRouteLeave事件清空值以免赋值后重新加载页面时window.name还会有值 原篇章是vue判断当前是哪个页面_vue 判断页面是首次进入还是再次刷新的实例_公幹氣褊的博客-CSDN博客 ...
vue父页面调用方法iframe
08-03
在Vue父页面中调用iframe中的方法，可以通过以下步骤实现： 1. 在Vue父页面中，使用`$refs`获取到iframe元素对象。 2. 使用`contentWindow`属性获取到iframe的window对象。 3. 通过window对象调用iframe中的方法。 具体代码如下： ```javascript this.$refs.iframeName.contentWindow.FunctionName(); ``` 其中，`iframeName`是你在Vue父页面中给iframe元素设置的ref属性值，`FunctionName`是你想要调用的iframe中的方法名。 这样就可以在Vue父页面中调用iframe中的方法了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值