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…

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

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

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

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

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

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

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…

安索夫矩阵(ANSOFF)

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

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

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

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

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

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

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

智能医疗越发周到!新的机器人系统评估中风后的活动能力

原创 | 文 BFT机器人 中风是在医疗界上最难的解决的病例之一&#xff0c;全球每年有超过1500万人中风&#xff0c;四分之三的中风患者的手臂和手部会出现损伤、虚弱和瘫痪。 许多中风患者日常生活是依靠他们强壮的手臂来完成的&#xff0c;从拿一些小东西到梳头&#xff0c;即…

phpstudy和IDEA 配置php debug

1.安装xdebug 扩展&#xff0c;phpinfo() 查看 2.配置php.ini zend_extensionD:/phpstudy_pro/Extensions/php/php7.4.3nts/ext/php_xdebug.dll xdebug.collect_params1 xdebug.collect_return1 xdebug.auto_traceOn xdebug.trace_output_dirD:/phpstudy_pro/Extensions/php_l…

c语言新龟兔赛跑

以下是一个使用C语言编写的新的龟兔赛跑游戏&#xff1a; #include <stdio.h>#include <stdlib.h>#include <time.h>int main() { int distance, turtle_speed, rabbit_speed, turtle_time, rabbit_time, rabbit_lead; srand(time(NULL)); // 随机数种…

Whatweb简单使用

目录 简介 安装 debian/ubtuntu redhat/centos 特性 使用 常用参数如下&#xff1a; whatweb -v whatweb --version whatweb -i 1.txt whatweb -v www.baidu.com 扫描等级 whatweb -a 4 www.baidu.com 扫描网段 whatweb --no-errors -t 255 192.168.71.0/24 导出…

在vscode中添加代码提示

添加配置 run->add_configuration 添加头文件路径 在c_cpp_properties.json中添加头文件路径 效果

时间敏感网络TSN的车载设计实践: 802.1Qbv协议

▎概述 IEEE 802.1Qbv[1]是TSN系列协议中备受关注的技术之一&#xff0c;如图1所示&#xff0c;它定义了一种时间感知整形器&#xff08;Time Aware Shaper&#xff0c;TAS&#xff09;&#xff0c;支持Qbv协议的交换机可以按照配置好的门控列表来打开/关闭交换机出口队列&…

2023软件应用类下载系统平台源码/手机软件应用、新闻资讯下载站/软件库网站源码

源码简介&#xff1a; 这个是最新软件应用类平台源码、手机应用下载系统源码、软件应用市场下载站源码、新闻资讯软件下载。2023软件应用类平台源码/手机软件应用、新闻资讯下载站&#xff0c;它是软件库网站源码。 最新软件应用类平台源码 手机应用下载系统源码 软件应用市场…

NX二次开发UF_CURVE_add_faces_ocf_data 函数介绍

文章作者&#xff1a;里海 来源网站&#xff1a;https://blog.csdn.net/WangPaiFeiXingYuan UF_CURVE_add_faces_ocf_data Defined in: uf_curve.h int UF_CURVE_add_faces_ocf_data(tag_t face_tag, UF_CURVE_ocf_data_p_t uf_offset_data ) overview 概述 Add a face col…