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
})

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

字符串函数的模拟实现(strlen,strcpy,strcat,strcmp,strstr)(图文并茂,清晰易懂)

目录 1. strlen函数2. strcpy函数3. strcat函数4. strcmp函数5. strstr函数 个人专栏&#xff1a; 《零基础学C语言》 1. strlen函数 strlen函数&#xff08;Get string length&#xff09;的功能是求字符串长度 使用注意事项&#xff1a; 字符串以 ‘\0’ 作为结束标志&…

品牌线上窜货查的出来吗

如果窜货不治理会出现什么局面&#xff0c;显见的当然是渠道混乱&#xff0c;低价丛生&#xff0c;严重的还会导致真假混卖&#xff0c;最后所有的后果都会由品牌承担&#xff0c;口碑的影响是必然的&#xff0c;那品牌的衰败也会是一种趋势&#xff0c;所以治理窜货是品牌发展…

毛里塔尼亚市场开发攻略,收藏一篇就够了

毛里塔尼亚是非洲西北部的一个国家&#xff0c;也是中国长期援建的一个国家&#xff0c;也是一带一路上的国家。毛里塔尼亚生产生活资料依赖进口&#xff0c;长期依赖跟我们国家的贸易关系也是比较紧密的&#xff0c;今天就来给大家介绍一下毛里塔尼亚的市场开发公路。文章略长…

vue2【组件的构成】

目录 1&#xff1a;什么是组件化开发 2&#xff1a;vue中的组件化开发 3&#xff1a;vue组件的三个组成部分 4&#xff1a;组件中定义方法&#xff0c;监听器&#xff0c;过滤器&#xff0c;计算属性节点。 5&#xff1a;template中只允许唯一根节点&#xff0c;style默认…

二次开发问题汇总【C#】

1未将对象引用到实例。 接口函数的参数不对。解决办法【用fixed去限制数组长度】 unsafe public struct VCI_BOARD_INFO {public UInt16 hw_Version;public UInt16 fw_Version;public UInt16 dr_Version;public UInt16 in_Version;public UInt16 irq_Num;public byte can_Num;…

高浓度化工废水如何处理

高浓度化工废水的处理一直是一个备受关注的社会问题。随着化工行业的不断发展&#xff0c;化工废水的排放量也逐渐增加。因此&#xff0c;我们需要找到一种有效的方法来处理这种高浓度化工废水&#xff0c;以保护环境和人民的健康。 首先&#xff0c;我们可以采用物理方法处理…

基于springboot实现农机电招平台系统项目【项目源码+论文说明】

基于springboot实现农机电招平台系统演示 摘要 随着农机电招行业的不断发展&#xff0c;农机电招在现实生活中的使用和普及&#xff0c;农机电招行业成为近年内出现的一个新行业&#xff0c;并且能够成为大群众广为认可和接受的行为和选择。设计农机电招平台的目的就是借助计算…

2015年7月28日 Go生态洞察:GopherCon 2015综述

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…

选择振弦采集仪:易操作、快速数据传输和耐用性是关键要素

选择振弦采集仪&#xff1a;易操作、快速数据传输和耐用性是关键要素 振弦采集仪是一种可以测量和记录振动、冲击、声音等信号的设备。它是目前工程、科研、医学、环保等领域中常见的一种测试设备。在选择振弦采集仪时&#xff0c;易操作、快速数据传输和耐用性是关键要素。 易…

VUE项目部署过程中遇到的错误:POST http://124.60.11.183:9090/test/login 405 (Not Allowed)

我当初报了这个405错误&#xff0c;再网上查了半天&#xff0c;他们都说什么是nginx部署不支持post访问静态资源。 但后面我发现我是因为另一个原因才导致的无法访问。 我再vue中有使用devServer:{ proxy:{} }进行路由转发。 但是&#xff01;&#xff01; 在这个配置只…

《洛谷深入浅出基础篇》P4715淘汰赛——二叉树

上链接&#xff1a;【深基16.例1】淘汰赛 - 洛谷https://www.luogu.com.cn/problem/P4715 上题干&#xff1a; 题目描述 有 2^n&#xff08;n≤7&#xff09;个国家参加世界杯决赛圈且进入淘汰赛环节。已经知道各个国家的能力值&#xff0c;且都不相等。能力值高的国家和能力值…

YOLOv5 分类模型 预处理 OpenCV实现

YOLOv5 分类模型 预处理 OpenCV实现 flyfish YOLOv5 分类模型 预处理 PIL 实现 YOLOv5 分类模型 OpenCV和PIL两者实现预处理的差异 YOLOv5 分类模型 数据集加载 1 样本处理 YOLOv5 分类模型 数据集加载 2 切片处理 YOLOv5 分类模型 数据集加载 3 自定义类别 YOLOv5 分类模型…

逻辑回归

目录 第1关&#xff1a;逻辑回归核心思想 相关知识 什么是逻辑回归 编程要求 代码文件 第2关&#xff1a;逻辑回归的损失函数 相关知识 为什么需要损失函数 逻辑回归的损失函数 题目答案 第3关&#xff1a;梯度下降 相关知识 什么是梯度 梯度下降算法原理 编程要…

电线电缆、漆包线工厂开源MES/生产管理系统/云MES

万界星空科技专业的漆包线MES系统功能介绍&#xff1a; 从原材料出入库-拉丝机等设备管理-漆包线称重打印系统自动入库&#xff08;支持多台秤同时称重&#xff09;-建立销售报价、销售订单-生产订单-支持扫码出库及自动拣货出库-应收应付账款-对接各种其他系统及财务系统。 …

(免费领源码)java#springboot#mysql流浪动物救助系统78174-计算机毕业设计项目选题推荐

摘 要 21世纪的今天&#xff0c;随着社会的不断发展与进步&#xff0c;人们对于信息科学化的认识&#xff0c;已由低层次向高层次发展&#xff0c;由原来的感性认识向理性认识提高&#xff0c;管理工作的重要性已逐渐被人们所认识&#xff0c;科学化的管理&#xff0c;使信息存…

NX二次开发UF_CURVE_add_string_to_ocf_data 函数介绍

文章作者&#xff1a;里海 来源网站&#xff1a;https://blog.csdn.net/WangPaiFeiXingYuan UF_CURVE_add_string_to_ocf_data Defined in: uf_curve.h int UF_CURVE_add_string_to_ocf_data(tag_t string_tag, int offset_direction, int num_offsets, UF_CURVE_ocf_values_…

芯片的测试方法

半导体的生产流程包括晶圆制造和封装测试&#xff0c;在这两个环节中分别需要完成晶圆检测(CP, Circuit Probing)和成品测试(FT, Final Test)。无论哪个环节&#xff0c;要测试芯片的各项功能指标均须完成两个步骤&#xff1a;一是将芯片的引脚与测试机的功能模块连接起来&…

一些好用的前端小插件(转自知乎)

一些好用的前端小插件&#xff08;2&#xff09; 1. cropper.js Cropper.js 2.0 是一系列用于图像裁剪的 Web 组件。 官网地址&#xff1a;https://fengyuanchen.github.io/cropperjs/v2/zh/ 2. Vditor Vditor是一款浏览器端的 Markdown 编辑器&#xff0c;支持所见即所得、…

点击按钮,按钮的文字变为倒计时,的小技巧(适用于获取验证码)

看效果图&#xff1a; 代码 <a-buttonclick"getSms":disabled"myState.smsSendFlag"v-text"(!myState.smsSendFlag && 获取验证码) || ${myState.time} s" ></a-button>data(){return {myState: {smsSendFlag: false,tim…

【【Linux 常用命令学习 之 一 】】

Linux 常用命令学习 之 一 打开终端之后的 我们会了解 所使用的 字符串含义 其中前面的 zhuxushuai 是 当前的用户名字 接下来的 zhuxushuai-virtual-machine 是 机器名字 最后的符号 $表示 当前是普通用户 输入指令 ls 是打印出当前所在目录中所有文件和文件夹 shell 操…