vue 通过ref调用router-view子组件的方法

在这里插入图片描述

由于用的vue2.7版本,但用了vue3 setup的语法;
注意:是vue2的template结构,vue3的setup语法;非这种情况需要举一反三。

处理方案:

1、对router-view加上ref

  • template修改
    直接对router-view加上ref,
    <router-view ref="child" > </router-view>
  • script修改
  // add方法function add(){// 成功后调用子组件(此)proxy.$refs.child.refreshList}

2、子组件暴漏方法

注意:一定要用【defineExpose】暴漏给父级,否则父级看不到这个方法
script内:

function refreshList() {
}// 暴漏给父组件
defineExpose({refreshList
})

其他场景的:

3、纯vue2的

应该this.$refs.child.refreshList就成,
因为子组件用的是 methods定义的

4、纯vue3的

  • 父组件template修改
<template><router-view v-slot="{ Component }"><component ref="child" :is="Component" /></router-view>
</template>
  • 父组件script修改
  // add方法function add(){// 成功后调用子组件(此)proxy.$refs.child.refreshList}
  • 子组件script修改
    注意:一定要用【defineExpose】暴漏给父级,否则父级看不到这个方法
function refreshList() {
}
// 暴漏给父组件
defineExpose({refreshList
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/165996.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

金蝶云星空和四化智造MES(WEB)单据接口对接

金蝶云星空和四化智造MES&#xff08;WEB&#xff09;单据接口对接 对接系统&#xff1a;四化智造MES&#xff08;WEB&#xff09; MES系统是集成生产管理、品质管理、设备管理、BI数据中心、库存管理、工时管理、数据采集、看板管理等为一体的综合性生产管理系统。通过强调制造…

wagtail-安装配置

系列文章目录 文章目录 系列文章目录安装虚拟环境安装wagtail查看安装后的包 创建wagtail项目安装依赖迁移创建超级用户运行项目 安装虚拟环境 https://blog.csdn.net/gsl371/article/details/117917857 安装wagtail (wagenv) C:\djproject\wagprj>pip list Package V…

淘宝88vip退费问题

前一段时间&#xff0c;双十一活动&#xff0c;想着开个淘宝的88vip领卷买东西会实惠一点&#xff0c;另外&#xff0c;它自带的权益也不错&#xff0c;有饿了吗、网易云、优酷或者芒果的。但是到了当天发现&#xff0c;一个vip的卷也用不了&#xff0c;顿感什么恼火&#xff0…

synchronized的轻量级锁居然不会自旋?

《Java并发编程的艺术》中说到「如果失败&#xff0c;表示其他线程竞争锁&#xff0c;当前线程便尝试使用自旋来获取锁」&#xff0c;并且下文所配的流程图中明确表示自旋失败后才会升级为重量级锁&#xff0c;但《深入理解Java虚拟机》又说「如果出现两条以上的线程争用同一个…

超声波雪深传感器冬季里的科技魔法

在冬季的某个清晨&#xff0c;当你打开大门&#xff0c;被厚厚的积雪覆盖的大地映入眼帘&#xff0c;你是否曾想过&#xff0c;这片雪地的深度是多少&#xff1f;它又如何影响着我们的生活和环境&#xff1f;今天&#xff0c;我们将为你揭开这个谜团&#xff0c;介绍一款神秘的…

眼镜清洗机原理是怎么样的?2023年眼镜清洗机推荐

在日常生活中有许多小伙伴是因为看太多书或者是看太多电子产品导致近视佩戴上了眼镜&#xff0c;毕竟眼镜佩戴上后就再也离不开它了&#xff0c;像日常佩戴的眼镜上会积累非常多污垢以及堆积细菌&#xff0c;而我们手动清洗眼镜时不能除菌也不能清洁到缝隙中&#xff0c;像眼镜…

thingsboard的WebSocket API的使用

1、参考文档 Working with telemetry data | ThingsBoard Community Edition 2、订阅的命令 我们需要订阅不同的数据,那么该如何来填写参数呢,你需要参考后端代码 TelemetryPluginCmdsWrapper 以及订阅返回的结果参考类:TelemetrySubscriptionUpdate 链接地址: https:/…

error: ‘for‘ loop initial declarations are only allowed in C99 or C11 mode

在使用for循环时&#xff0c;在循环内定义变量&#xff0c;出现如下错误 [Error] ‘for’ loop initial declarations are only allowed in C99 or C11 mode [Note] use option -stdc99&#xff0c;-stdgnu99&#xff0c;-stdc11 or-stdgnu11 to compile your code 出现这个错误…

使用Pytorch从零开始构建GRU

门控循环单元 (GRU) 是 LSTM 的更新版本。让我们揭开这个网络的面纱并探索这两个兄弟姐妹之间的差异。 您听说过 GRU 吗&#xff1f;门控循环单元&#xff08;GRU&#xff09;是更流行的长短期记忆&#xff08;LSTM&#xff09;网络的弟弟&#xff0c;也是循环神经网络&#x…

极智AI | LLM大模型部署框架之OpenLLM

欢迎关注我的公众号 [极智视界],获取我的更多经验分享 大家好,我是极智视界,本文来介绍一下 LLM大模型部署框架之OpenLLM。 邀您加入我的知识星球「极智视界」,星球内有超多好玩的项目实战源码下载,链接:https://t.zsxq.com/0aiNxERDq 由于 LLM 大模型在模型结构、模型规…

图像评价之计算PSNR、SSIM、MSE、LPIPS和NIQE评价指标

文章目录 链接说明代码峰值信噪比结构相似性均方误差学习感知图像块相似性自然图像质量评估器 链接 GitHub 仓库 如果代码对你的研究有所帮助&#xff0c;请为该仓库点上小星星。 说明 PSNR、SSIM、MSE和LPIPS是有监督指标&#xff0c;计算时必须是两对图像参与&#xff1b;…

安索夫矩阵(ANSOFF)

&#x1f449;安索夫矩阵是策略管理之父安索夫博士于1957年提出的营销策略模型&#xff0c;该模型以“产品”和“市场”作为两大基本面&#xff0c;提出了4种不同组合下的营销策略&#xff0c;是营销分析中应用最广泛的工具之一。其主要逻辑是通过选择4种不同的成长性策略来实现…

C++11的线程

线程的创建 用std::thread创建线程非常简单&#xff0c;只需要提供线程函数或者线程对象即可&#xff0c;并可以同时指定线程函数的参数。下面是创建线程的示例&#xff1a; #include <thread> #include <iostream> using namespace std;void func() {cout <<…

C# 获取图像、字体等对象大小的数据结构SizeF

如果你想要获取字符串 "你好吗" 的字节数组长度或者字符数&#xff0c; 使用如下代码&#xff1a; string s "你好吗"; //字节数组长度 int byteCount System.Text.Encoding.UTF8.GetBytes(s).Length; //字符数 int charCount s.Length; 如果你想获取…

大话设计模式C++实现

大话设计模式&#xff0c;讲得非常好&#xff0c;但是作者是用C#写的&#xff0c;为了方便C程序员&#xff0c;使用C写了大话设计模式的代码 详情见Github&#xff1a;https://github.com/liubamboo/BigTalkDesignPattern

新苹果手机如何导入旧手机数据?解决方案来了,记得收藏!

为了保持其竞争优势&#xff0c;苹果公司不断推出新的产品和服务&#xff0c;因此苹果手机的更新换代速度是比较快的。正巧最近刚出了iPhone15&#xff0c;相信很多小伙伴已经换上了期待已久的新手机。 更换新手机后&#xff0c;大家都会面临一个问题&#xff1a;新苹果手机如…

java 手机商城免费搭建+电商源码+小程序+三级分销+SAAS云平台

【SAAS云平台】打造全行业全渠道全场景的SaaS产品&#xff0c;为店铺经营场景提供一体化解决方案&#xff1b;门店经营区域化、网店经营一体化&#xff0c;本地化、全方位、一站式服务&#xff0c;为多门店提供统一运营解决方案&#xff1b;提供丰富多样的营销玩法覆盖所有经营…

Windows DOS 常用命令

文章目录 1 概述1.1 官方文档1.2 常用 2 分类2.1 目录2.2 文件2.3 网络2.4 系统 1 概述 1.1 官方文档 Windows 命令官方文档&#xff1a;https://learn.microsoft.com/zh-cn/windows-server/administration/windows-commands/windows-commands 1.2 常用 win r # 打开运…

如何预防数据泄露?六步策略帮您打造企业信息安全壁垒

大家好&#xff01;我是恒小驰&#xff0c;今天我想和大家聊聊一个非常重要的话题——如何预防数据泄露。在这个数字化的时代&#xff0c;数据已经成为了我们生活中不可或缺的一部分。然而&#xff0c;随着数据的价值日益凸显&#xff0c;数据泄露的风险也随之增加。企业应该如…